WEBVTT 1 00:02.880 --> 00:07.840 Trouver la bonne typographie ou combinaison de typographies et la bonne palette de couleurs est 2 00:07.920 --> 00:10.060 essentiellement la première étape lors du démarrage d'une nouvelle conception. 3 00:10.944 --> 00:12.880 Les typographies et les couleurs sont immensément 4 00:13.020 --> 00:16.440 important pour établir l’apparence souhaitée pour votre projet. 5 00:16.860 --> 00:17.780 Alors vous devez vous demander 6 00:18.060 --> 00:23.340 quel type de police ou de couleur donnera l'émotion que vous recherchez vraiment et avec laquelle vous fonctionnerez le mieux 7 00:23.340 --> 00:24.840 le brief et l'objectif du client. 8 00:25.632 --> 00:27.100 Commençons par les typographies. 9 00:27.400 --> 00:28.480 Je crois fermement que choisir 10 00:28.640 --> 00:31.800 la bonne combinaison de polices est essentielle à toute conception Web de qualité. 11 00:32.460 --> 00:37.700 Si elle est bien réalisée, elle peut ajouter beaucoup de personnalité à votre projet tout en garantissant une grande lisibilité. 12 00:38.280 --> 00:39.820 Quel type de police devriez-vous choisir ? 13 00:40.240 --> 00:41.760 Faut-il opter pour une police serif ? 14 00:42.400 --> 00:43.620 Qu'en est-il d'une police monospace ? 15 00:43.840 --> 00:46.360 Ou peut-être même qu'une police sans empattement serait un choix plus sûr. 16 00:46.800 --> 00:47.100 Bien, 17 00:47.180 --> 00:48.800 Il n'y a vraiment pas qu'une seule bonne réponse. 18 00:49.320 --> 00:52.040 Essayez simplement d'utiliser la police qui reflète le mieux votre stratégie de marque 19 00:52.640 --> 00:53.140 et la messagerie. 20 00:55.552 --> 00:58.240 La typographie a le potentiel d’évoquer réellement des émotions. 21 00:58.700 --> 01:04.260 Par exemple, disons que vous travaillez sur un site Web technologique futuriste pour un produit. 22 01:04.920 --> 01:09.120 Vous souhaiterez peut-être utiliser une police sans empattement angulaire comme celle-ci, 23 01:09.360 --> 01:18.220 NB Architect STD, mélangé à une jolie petite monotypographie pour obtenir ce look et cette sensation futuristes que nous obtenons ici. 24 01:19.360 --> 01:20.420 Et d’autre part, 25 01:20.460 --> 01:25.100 si vous travaillez davantage sur un site Web de confiserie comme cet exemple ici, 26 01:25.880 --> 01:28.380 peut-être que vous voulez opter pour une boisson pétillante et ludique 27 01:28.760 --> 01:30.740 typographie comme celle-ci, 28 01:30.940 --> 01:36.700 SK Pupuk, pour obtenir ce genre de sensation très amusante mélangée à 29 01:37.260 --> 01:39.680 Police de caractères variable Chi ici. 30 01:40.080 --> 01:45.140 Les deux polices ensemble donnent vraiment un aspect super ludique et coloré. 31 01:45.340 --> 01:47.200 Donc si nous regardons les deux projets, 32 01:47.440 --> 01:49.200 ils sont vraiment complètement différents. 33 01:49.640 --> 01:50.360 À part l'image, 34 01:50.380 --> 01:53.040 la typographie est le seul élément graphique dont nous disposons, 35 01:53.200 --> 01:55.640 et cela fait vraiment partie du design. 36 01:57.300 --> 01:58.480 Voici un autre exemple de 37 01:58.640 --> 02:00.500 site web que j'ai réalisé pour Home Société. 38 02:00.660 --> 02:01.480 Dans ce cas, 39 02:01.500 --> 02:04.480 nous avons opté pour une belle typographie serif. 40 02:04.760 --> 02:08.520 Celui-ci s'appelle GT Super Display. 41 02:08.820 --> 02:15.400 La raison pour laquelle nous avons décidé d'utiliser cette police est que nous voulions vraiment apporter une touche de sophistication au site Web, 42 02:15.680 --> 02:20.080 surtout pour les gros titres et les plus gros paragraphes de texte comme ici. 43 02:20.340 --> 02:22.060 Et pour le texte plus petit, 44 02:22.180 --> 02:23.360 comme ce que nous voyons ici, 45 02:23.520 --> 02:25.640 ou les petits détails que l'on a sur les côtés, 46 02:25.780 --> 02:28.560 nous avons opté pour une typographie sans serif 47 02:28.820 --> 02:31.640 juste pour être sûr que c'était très lisible. 48 02:31.920 --> 02:34.620 Et nous avons opté pour une police très légère, 49 02:34.760 --> 02:38.680 pas trop audacieux, pour vraiment compléter la typographie serif que nous avions ici. 50 02:39.200 --> 02:40.700 C'est donc vraiment une question d'équilibre, 51 02:40.900 --> 02:47.140 et nous essayons toujours de trouver la bonne police pour accentuer le contenu que nous voulons mettre en avant, 52 02:47.320 --> 02:47.480 droite? 53 02:47.620 --> 02:52.940 La typographie est un excellent moyen de donner plus d’importance à certaines sections et moins à d’autres. 54 02:53.080 --> 02:57.300 Les informations que vous souhaitez que l’utilisateur lise doivent avoir l’impact visuel le plus fort. 55 02:58.640 --> 03:01.960 Prenons par exemple ici le site Good is the New Cool. 56 03:02.140 --> 03:03.700 Ceci est la page À propos de nous. 57 03:03.920 --> 03:05.152 Je peux peut-être appuyer sur play, 58 03:05.380 --> 03:07.060 et nous pouvons regarder le prototype. 59 03:07.340 --> 03:08.440 Donc dans ce cas, 60 03:08.460 --> 03:14.280 le texte que nous voulons réellement que l'utilisateur lise est volontairement surdimensionné pour lui donner plus d'importance. 61 03:14.500 --> 03:15.360 Dans ce cas, 62 03:15.360 --> 03:18.560 nous avons ce gros bloc de texte que nous voulons vraiment que l'utilisateur lise. 63 03:18.660 --> 03:24.040 Et puis nous avons cette deuxième couche d’informations qui est plus petite et un peu moins importante. 64 03:24.380 --> 03:26.220 C'est pourquoi la police est plus petite. 65 03:26.420 --> 03:28.220 Et puis, lorsque nous commençons à faire défiler, 66 03:28.680 --> 03:30.400 nous avons ce grand titre, encore une fois, 67 03:30.848 --> 03:31.680 un peu plus grand, 68 03:31.840 --> 03:32.940 un peu plus audacieux. 69 03:32.980 --> 03:34.980 Nous voulons que l’utilisateur lise cette partie. 70 03:35.220 --> 03:37.820 Et puis on revient avec un titre plus petit, 71 03:38.080 --> 03:38.820 texte plus petit. 72 03:38.960 --> 03:42.912 Alors gardez vraiment à l’esprit de mettre le contenu qui est le plus important, 73 03:43.060 --> 03:46.180 le contenu que vous souhaitez que l'utilisateur lise un peu plus gros. 74 03:46.300 --> 03:49.180 Choisissez la bonne typographie pour ce type de contenu. 75 03:49.460 --> 03:51.700 Et n’oublions pas la lisibilité. 76 03:52.060 --> 03:55.640 Si nous revenons ici à notre exemple du site Candy Shop, 77 03:56.000 --> 03:58.100 vous voudrez peut-être utiliser un plaisir, 78 03:58.640 --> 04:00.180 typographie funky pour le texte plus gros, 79 04:00.380 --> 04:01.700 comme ce que nous avons ici. 80 04:01.940 --> 04:03.560 Mais pour le texte plus petit, 81 04:03.900 --> 04:06.620 peut-être que ce genre de police n'est pas la plus lisible. 82 04:06.860 --> 04:11.100 C'est donc une bonne idée de changer et d'avoir une typographie plus lisible, 83 04:11.260 --> 04:12.400 comme dans ce cas ici, 84 04:12.540 --> 04:16.400 au moins pour le texte le plus petit et le paragraphe moyen, 85 04:16.680 --> 04:21.440 et gardez ces typographies funky uniquement pour les gros titres. 86 04:21.720 --> 04:22.660 De cette façon, 87 04:22.700 --> 04:24.320 vous veillerez à ce que tout soit lisible, 88 04:24.520 --> 04:26.260 tu auras toujours cet impact cool, 89 04:26.480 --> 04:28.620 mais tout sera facile à lire. 90 04:29.010 --> 04:31.660 Et quand il s'agit du texte plus petit, 91 04:31.920 --> 04:33.100 comme ce que nous avons ici, 92 04:33.300 --> 04:38.800 J'essaie généralement de ne pas descendre en dessous de 16 points pour la taille de la typographie. 93 04:39.060 --> 04:41.600 Parfois, quand nous sommes en majuscules, 94 04:41.800 --> 04:43.360 peut-être que je descendrai à 12, 95 04:43.520 --> 04:44.700 13, peut-être 14. 96 04:45.020 --> 04:46.560 Cela dépend de la typographie. 97 04:46.660 --> 04:46.980 Aussi, 98 04:47.340 --> 04:51.080 certaines typographies sont un peu plus grandes et plus faciles à lire. 99 04:51.220 --> 04:56.740 Mais si vous voulez vous assurer que chaque utilisateur du site Web peut lire tout ce qui s'y trouve, 100 04:56.900 --> 04:58.420 Habituellement, j'essaie de libérer 101 04:58.640 --> 04:58.660 un peu plus que ça. 102 04:58.660 --> 05:03.560 Je vais donc rester entre 16 et 20 pour le corps du texte. 103 05:03.760 --> 05:08.480 Lorsqu'il s'agit de rechercher et de télécharger des typographies, 104 05:08.540 --> 05:10.640 il existe de nombreuses ressources disponibles en ligne. 105 05:10.940 --> 05:12.440 Certains proposent des polices gratuites, 106 05:12.660 --> 05:14.140 tandis que d’autres exigent un paiement. 107 05:14.340 --> 05:16.780 Si vous recherchez une excellente bibliothèque de polices gratuite, 108 05:17.100 --> 05:20.340 Je vous recommande Google Fonts que vous connaissez probablement déjà. 109 05:20.480 --> 05:21.360 Je pense que pour moi, 110 05:21.420 --> 05:25.500 c'est la meilleure plateforme gratuite pour utiliser des typographies. 111 05:25.500 --> 05:27.960 Les typographies sont vraiment bien faites, 112 05:28.040 --> 05:28.620 bien construits et vraiment faciles à utiliser. 113 05:28.992 --> 05:30.440 Ils sont optimisés pour le Web. 114 05:30.680 --> 05:33.420 Vous pouvez facilement les intégrer à n'importe quel site Web. 115 05:33.740 --> 05:37.720 C'est généralement ici que je vais pour obtenir des typographies gratuites. 116 05:37.820 --> 05:42.080 Vous pouvez également vous rendre sur DaFont pour des typographies gratuites, 117 05:42.120 --> 05:46.540 mais je ne suis pas un grand fan de DaFont parce que je pense qu'il y a trop de typographies différentes, 118 05:46.580 --> 05:48.840 n'importe qui peut télécharger une police sur DaFont. 119 05:48.980 --> 05:51.480 Vous avez donc de belles polices, 120 05:51.600 --> 05:54.380 mais vous avez aussi beaucoup de polices pas terribles, 121 05:54.540 --> 05:56.260 police de caractères pas vraiment bien faite. 122 05:56.400 --> 05:57.160 Pour moi, 123 05:57.220 --> 05:58.620 c'est une sorte de fast food 124 05:58.640 --> 05:59.480 de la typographie. 125 05:59.700 --> 06:01.880 Vous pourriez y trouver quelque chose de sympa, 126 06:01.980 --> 06:04.380 mais c'est rare que je vais sur DaFont. 127 06:04.560 --> 06:11.300 Il existe également de nombreuses autres plateformes sur lesquelles vous pouvez acheter des polices comme FontSquareL. 128 06:11.440 --> 06:12.960 C'est un endroit où je vais parfois. 129 06:13.840 --> 06:17.360 Il y a aussi MyFont avec beaucoup de typographies ici. 130 06:17.680 --> 06:21.060 Et évidemment les polices Adobe Fonts. 131 06:21.060 --> 06:22.380 Si vous avez un compte Adobe, 132 06:22.600 --> 06:26.800 vous avez déjà accès gratuitement à de nombreuses typographies différentes. 133 06:26.880 --> 06:28.540 Et vous pouvez également acheter des polices sur 134 06:28.640 --> 06:29.140 cette plateforme. 135 06:29.420 --> 06:34.080 Vous pouvez facilement rechercher des typographies comme vous le faites sur Google. 136 06:34.300 --> 06:36.320 C'est une excellente plateforme pour moi. 137 06:36.600 --> 06:43.340 Je pense que Google Font et Adobe Fonts sont parfaits pour les typographies gratuites ou pas trop chères. 138 06:43.460 --> 06:46.980 J'aime aussi beaucoup ces trois autres plateformes ici. 139 06:47.200 --> 06:49.760 Nous avons la fonderie de caractères Klim. 140 06:49.880 --> 06:53.120 J'adore les typographies que crée Klim Foundry. 141 06:53.420 --> 06:54.800 Ils sont vraiment bien faits, 142 06:54.980 --> 06:56.140 belles polices. 143 06:56.380 --> 06:57.780 Mais il faut les acheter, 144 06:57.880 --> 07:00.120 mais ils ont vraiment beaucoup de personnalité. 145 07:00.600 --> 07:02.860 Donc si vous cherchez une belle police, 146 07:03.080 --> 07:04.620 vous voudrez peut-être aller sur cette plateforme. 147 07:04.940 --> 07:09.780 Vous pouvez également trouver des typographies intéressantes sur ABC Dynamo. 148 07:09.860 --> 07:13.180 Ils ont des typographies plutôt cool là-bas, 149 07:13.180 --> 07:16.320 très différent, mais toujours très bien fait aussi. 150 07:16.520 --> 07:18.240 Pas trop cher non plus. 151 07:18.640 --> 07:20.100 Et enfin, 152 07:20.120 --> 07:22.280 une autre plateforme est Paragram Paragram. 153 07:22.580 --> 07:24.800 J'adore les typographies de Paragram Paragram. 154 07:25.060 --> 07:28.620 Vous pouvez également trouver ici de nombreuses polices magnifiques. 155 07:28.840 --> 07:31.160 Vous pouvez également les essayer gratuitement. 156 07:31.300 --> 07:33.220 C'est ce qui est cool avec cette plateforme. 157 07:33.460 --> 07:37.260 Vous pouvez trouver une typographie que vous aimez et télécharger la version d'essai. 158 07:37.560 --> 07:39.920 Et si vous finissez par utiliser la police sur le site Web, 159 07:40.100 --> 07:43.020 il suffit alors de l'acheter pour avoir les droits sur la police. 160 07:43.140 --> 07:45.680 Mais au moins, vous pouvez l'essayer sur votre conception avant de l'acheter. 161 07:45.800 --> 07:46.360 Donc c'est super. 162 07:46.580 --> 07:50.860 Et vous avez également ici le pack de démarrage de polices qui contient, 163 07:51.000 --> 07:52.280 Je ne sais pas combien, 164 07:52.340 --> 07:56.160 Je pense à plus de 50 typographies différentes pour un prix très bas. 165 07:56.340 --> 07:58.620 Cela peut donc être une bonne option pour les personnes qui souhaitent l’essayer. 166 07:58.640 --> 08:01.320 Acheter quelques polices sans les payer trop cher. 167 08:01.600 --> 08:06.140 Pour vous aider à déterminer quelle police choisir, 168 08:06.360 --> 08:09.340 un bon point de départ est de revenir sur votre mood board. 169 08:09.600 --> 08:13.360 Voici le mood board d'un projet que j'ai réalisé pour le projet Afterglow. 170 08:13.680 --> 08:15.200 Et si nous regardons le mood board, 171 08:15.400 --> 08:22.720 nous pouvons simplement faire défiler et déjà voir quel type de typographies nous pourrions vouloir utiliser. 172 08:22.980 --> 08:24.860 Si je fais défiler tout, 173 08:25.140 --> 08:28.600 Je vois que nous avons en quelque sorte un mélange entre la typographie Serif 174 08:28.900 --> 08:30.360 et typographie Sans Serif. 175 08:30.592 --> 08:33.760 Je souhaiterais donc peut-être trouver ces deux types de polices. 176 08:34.080 --> 08:35.820 Pas trop lourd visuellement, 177 08:36.260 --> 08:39.220 un joli mélange de parfois un peu plus audacieux, 178 08:39.280 --> 08:40.620 parfois un peu plus léger. 179 08:40.780 --> 08:46.780 C'est un excellent endroit pour avoir une bonne idée de ce que vous souhaitez réaliser en termes de typographie. 180 08:47.080 --> 08:50.620 Si nous regardons le mood board que nous avons créé plus tôt pour C2 Montréal, 181 08:50.920 --> 08:54.140 par exemple, si je fais défiler le mood board, 182 08:54.320 --> 08:58.620 Je vois tout de suite que je vais probablement vouloir trouver une belle police. 183 08:59.100 --> 08:59.240 Alors je vais continuer et taper celui-ci. 184 08:59.240 --> 09:00.280 Et si je fais défiler mon mood board, je peux voir que je vais trouver une belle typographie Sans Serif. 185 09:00.480 --> 09:01.600 Pas trop léger, 186 09:01.760 --> 09:05.140 c'est un peu audacieux à utiliser dans ma conception comme ça. 187 09:05.300 --> 09:08.560 Et partout, c'est cette police de caractère au design très suisse, 188 09:08.700 --> 09:10.180 un peu comme Helvetica New. 189 09:10.320 --> 09:12.200 Dans le cas de C2 Montréal, 190 09:12.560 --> 09:17.360 Je n’ai pas eu à choisir une police car la marque avait déjà sa propre police. 191 09:17.500 --> 09:19.380 C'est en fait le Nouveau Montréal, 192 09:19.640 --> 09:21.960 ce qui est logique puisque c'est pour C2 Montréal. 193 09:22.260 --> 09:25.900 Et New Montreal est une typographie qui ressemble déjà à ça. 194 09:25.960 --> 09:27.040 C'était donc une bonne chose. 195 09:27.100 --> 09:28.510 Mais en général, 196 09:28.640 --> 09:36.080 pour la plupart des projets, vous n'avez pas nécessairement de police avec laquelle travailler, à moins que vous ne commenciez avec un livre de marque avec quelque chose de déjà établi. 197 09:36.480 --> 09:37.400 Alors tu peux, 198 09:37.440 --> 09:39.700 ouais, retourne simplement à ton mood board, 199 09:39.880 --> 09:41.480 Regardez les inspirations là-bas. 200 09:41.700 --> 09:45.540 Et parfois, il peut y avoir une police sympa dans votre inspiration, 201 09:45.800 --> 09:49.160 mais vous ne savez pas forcément quelle est la typographie. 202 09:49.360 --> 09:51.940 Prenons un exemple ici. 203 09:52.260 --> 09:54.320 Disons que nous regardons cette typographie. 204 09:54.520 --> 09:55.640 J'aime cette police. 205 09:55.820 --> 09:57.700 J'aimerais l'utiliser sur ma conception, 206 09:58.640 --> 09:59.320 mais je ne sais pas quel est le nom. 207 09:59.480 --> 10:03.980 Il y a donc une plateforme que j'utilise parfois pour trouver de la typographie, 208 10:04.260 --> 10:05.660 le myfont.com. 209 10:05.820 --> 10:08.544 Il y a cette option de police ici, 210 10:08.860 --> 10:18.620 où vous pouvez réellement télécharger une image et cela vous aidera à déterminer quelle est la typographie et recommandera quelques polices similaires à cette typographie particulière. 211 10:18.820 --> 10:21.504 Disons que j'opte pour celui-ci ici. 212 10:22.040 --> 10:25.940 Je vais juste capturer cette image ici. 213 10:26.120 --> 10:28.352 Alors maintenant je l'ai sur mon bureau. 214 10:28.940 --> 10:32.240 Je vais juste télécharger ceci sur la plateforme, 215 10:32.560 --> 10:33.080 droite? 216 10:33.696 --> 10:38.840 Alors maintenant, il me recommande un tas de typographies différentes qui sont très similaires à celle-ci. 217 10:38.920 --> 10:42.560 Si nous le comparons à ce qu'ils recommandent, 218 10:42.920 --> 10:44.780 c'est très similaire. 219 10:44.980 --> 10:46.720 Vous pouvez donc simplement faire défiler, 220 10:46.900 --> 10:50.620 trouve celui qui te semble le plus ressemblant, 221 10:50.660 --> 10:52.832 et vous pouvez le télécharger. 222 10:53.160 --> 10:53.728 Évidemment, 223 10:53.960 --> 10:58.400 il n'y a pas toutes les typographies et vous ne pourrez pas tout trouver car c'est juste 224 10:58.640 --> 11:00.540 je recommande les polices qui sont sur leur plateforme. 225 11:00.780 --> 11:03.480 Mais c'est vraiment génial de vous aider à trouver des typographies. 226 11:03.680 --> 11:07.700 Et si vous avez trouvé votre police sur un site Web et que vous savez de quel site Web il s'agit, 227 11:07.840 --> 11:09.860 ce n'est peut-être pas le meilleur exemple. 228 11:10.420 --> 11:13.920 Allons plutôt sur ce site Web ici. 229 11:14.220 --> 11:17.460 Et j'adore cette typographie ici. 230 11:17.760 --> 11:19.300 Donc, parce que je suis sur le site Web, 231 11:19.500 --> 11:23.480 Je peux utiliser le plugin Chrome qui existe et qui s'appelle quelle police. 232 11:23.700 --> 11:26.360 Et lorsque vous activez le plugin, 233 11:26.560 --> 11:28.520 vous pouvez cliquer sur n'importe quelle typographie 234 11:28.640 --> 11:28.840 tu vois. 235 11:29.040 --> 11:29.840 Dans ce cas, 236 11:30.336 --> 11:33.480 Je peux cliquer ici et vous pouvez voir le nom de la police. 237 11:33.680 --> 11:36.620 Je vois qu'il s'agit du nouveau Hass Display Pro. 238 11:36.960 --> 11:38.340 Je peux voir la taille. 239 11:38.600 --> 11:40.120 C'est 120 pixels. 240 11:40.380 --> 11:41.520 Je peux voir la hauteur de la ligne, 241 11:41.720 --> 11:47.160 le poids, la couleur, un tas de détails qui peuvent être super utiles lorsque vous recherchez une police. 242 11:47.300 --> 11:49.180 Vous recherchez peut-être aussi la bonne taille. 243 11:49.340 --> 11:50.940 Vous aimez la sensation que cela procure. 244 11:51.080 --> 11:52.220 Vous aimez sa taille. 245 11:52.320 --> 11:56.180 Vous souhaiterez peut-être avoir un titre de la même taille sur votre site Web. 246 11:56.360 --> 11:58.260 Alors tu peux simplement entrer ici, voir 247 11:58.640 --> 11:59.520 exactement tous les détails, 248 11:59.700 --> 12:01.820 le poids et appliquez-le à votre conception si vous le souhaitez. 249 12:02.060 --> 12:07.960 Les couleurs sont un autre excellent moyen d’évoquer différentes humeurs et émotions dans votre conception. 250 12:08.380 --> 12:12.760 Les couleurs chaudes comme le rouge et l’orange peuvent créer un sentiment d’énergie et d’excitation, 251 12:13.140 --> 12:17.660 tandis que les couleurs froides comme le bleu et le vert peuvent créer une sensation de calme et de détente. 252 12:18.520 --> 12:26.480 Choisir une palette de couleurs qui correspond à l’ambiance et à la personnalité souhaitées du site Web peut vraiment aider à créer un lien émotionnel plus fort avec l’utilisateur. 253 12:28.640 --> 12:32.940 Prenons par exemple le site Mana Yerba Mate que j'ai réalisé. 254 12:33.120 --> 12:34.280 Si nous allons sur ce site, 255 12:34.440 --> 12:35.760 c'est pour une boisson énergisante. 256 12:35.920 --> 12:38.360 Nous avons donc beaucoup de couleurs très vives. 257 12:38.500 --> 12:41.020 C'est très coloré avec les illustrations, 258 12:41.280 --> 12:43.220 avec la canette, l'appel à l'action, 259 12:43.420 --> 12:45.380 même les animations sur le texte, 260 12:45.540 --> 12:46.160 les titres. 261 12:46.380 --> 12:47.800 Lorsque nous commençons à faire défiler, 262 12:48.000 --> 12:49.520 Je pense que nous avons cela ici, 263 12:49.720 --> 12:50.340 Par exemple. 264 12:50.620 --> 12:56.720 Nous jouons donc vraiment avec les couleurs pour apporter cette grande touche de couleur sur tout le site Web. 265 12:58.640 --> 12:59.480 Une partie de la conception, 266 12:59.560 --> 13:03.160 cela fait partie de l'identité de Mana et de l'image de marque. 267 13:03.360 --> 13:04.160 Si par comparaison, 268 13:04.640 --> 13:09.220 nous regardons un autre site Web ici que j'ai fait pour Idzfis, 269 13:09.460 --> 13:12.020 qui est une entreprise de construction industrielle, 270 13:12.180 --> 13:14.580 nous avons une palette de couleurs complètement différente. 271 13:14.760 --> 13:16.080 C'est vraiment moins coloré. 272 13:16.440 --> 13:18.176 C'est ce bleu profond. 273 13:18.400 --> 13:19.296 Nous avons du blanc, 274 13:19.520 --> 13:22.540 nous avons du gris, et c'est vraiment plus grave, 275 13:22.944 --> 13:24.220 plus industriel. 276 13:24.620 --> 13:28.460 Encore une fois, la couleur joue un rôle important dans la conception dans ce cas. 277 13:28.640 --> 13:32.940 Cela donne beaucoup de personnalité à l'image de marque et au site Web dans son ensemble. 278 13:33.200 --> 13:36.160 Et si nous voulons regarder le site Web de C2 Montréal, 279 13:36.440 --> 13:38.180 ce que nous avons fini par utiliser pour les couleurs, 280 13:38.300 --> 13:41.920 nous avons fini par utiliser beaucoup de blocs très colorés, 281 13:42.220 --> 13:43.104 dégradés. 282 13:43.488 --> 13:46.304 Nous avons ce dégradé bleu de rose et d'orange. 283 13:46.740 --> 13:51.260 Notre couleur d'accent est en fait ce vert très vibrant. 284 13:51.940 --> 13:56.440 Nous avons le reste de la palette de couleurs, qui est en réalité juste le noir, le blanc et les niveaux de gris. 285 13:56.600 --> 13:57.568 Donc quelque chose de très, 286 13:57.792 --> 13:58.620 très coloré. 287 13:58.920 --> 14:00.820 Mais c’est vraiment juste une question d’équilibre. 288 14:00.900 --> 14:03.300 Nous commençons la page avec ces grandes couleurs, 289 14:03.340 --> 14:04.360 ces gros blocs. 290 14:04.640 --> 14:06.100 Mais à mesure que nous défilons vers le bas, 291 14:06.280 --> 14:08.520 en fonction des informations que nous montrons maintenant, 292 14:08.620 --> 14:11.120 nous montrons plus d'informations sur les intervenants. 293 14:11.280 --> 14:14.180 Maintenant, nous avons quelque chose de moins coloré, 294 14:14.560 --> 14:15.552 plus de niveaux de gris, 295 14:16.128 --> 14:17.480 un peu plus atténué. 296 14:17.540 --> 14:19.420 Il nous reste encore une touche de couleurs, 297 14:19.520 --> 14:22.120 mais nous sommes vraiment un peu plus discrets. 298 14:22.180 --> 14:26.860 Essayez donc de trouver les bons endroits pour mettre la couleur en fonction du brief, 299 14:27.008 --> 14:28.560 en fonction de ce que vous essayez de dire. 300 14:28.660 --> 14:30.496 Basé également sur l'image de marque. 301 14:30.780 --> 14:31.744 Dans ce cas, 302 14:31.960 --> 14:34.920 c'était basé sur l'identité de l'équipe de cette année, 303 14:35.160 --> 14:36.576 qui était une perspective combinée. 304 14:37.100 --> 14:38.860 C'était en 2023. 305 14:39.240 --> 14:43.680 Si nous regardons la version de cette année du site Web pour 2024, 306 14:44.400 --> 14:47.104 nous avons une palette de couleurs complètement différente. 307 14:47.560 --> 14:48.500 Nous avons ce bleu, 308 14:49.260 --> 14:50.000 blanc, 309 14:50.340 --> 14:51.440 marron, rose, 310 14:52.160 --> 14:52.576 vert. 311 14:52.880 --> 14:54.380 Maintenant la couleur pop, 312 14:54.460 --> 14:56.900 la couleur d'accent n'est plus le vert. 313 14:57.020 --> 14:58.048 Maintenant c'est bleu. 314 14:58.640 --> 15:02.920 Et dans ce cas, nous avons une palette de couleurs complètement différente. 315 15:03.540 --> 15:05.600 Mais le reste du site reste le même. 316 15:06.060 --> 15:08.240 C'est ainsi que le projet a été construit, 317 15:08.400 --> 15:13.040 en s'assurant que nous pouvons vraiment adapter cette section de héros ici, 318 15:13.140 --> 15:15.780 cette première partie, à l'équipe de chaque année. 319 15:16.060 --> 15:18.020 Et juste en changeant la couleur, 320 15:18.120 --> 15:19.600 en changeant un peu la mise en page, 321 15:19.720 --> 15:21.760 nous avons quelque chose de complètement différent. 322 15:22.240 --> 15:25.620 C'est pourquoi la palette de couleurs est un élément si important de la conception. 323 15:28.640 --> 15:28.840 Et 324 15:29.600 --> 15:33.580 Les typographies sont des éléments clés pour définir la direction artistique et la personnalité d'un site Web. 325 15:34.016 --> 15:39.020 En sélectionnant des couleurs et des polices qui évoquent l’ambiance souhaitée et fonctionnent avec l’identité de la marque, 326 15:39.420 --> 15:43.240 Votre site Web peut laisser une impression durable et mémorable sur ses visiteurs. 327 15:43.500 --> 15:44.540 Dans la prochaine leçon, 328 15:45.020 --> 15:47.300 nous comprendrons l’importance du système de grille, 329 15:47.640 --> 15:48.180 dimensions, 330 15:48.520 --> 15:51.260 et la mise en page dans la création d'une conception bien structurée.