La direction artistique
Temps 1 · séance 2 · ~20 min + maison
- Choisir une direction artistique à partir de vos références.
- La tenir sur une planche d'une page.
- Mesurer le contraste de chaque paire de couleurs de votre palette.
1. Ce que la mise en commun a montré
La direction artistique est l'ensemble des choix visuels d'un site : les couleurs, les polices, les tailles, les images, et la façon de les combiner. Ressortez la photo de la mise en commun du chapitre 1.02. La rubrique « Partis pris de design » montre ce qui revenait dans les sites de la classe. La colonne « Ce que la classe conseille » vous donne un point de départ. Vos lignes « ce que j'évite » fournissent vos premiers refus.
2. Le goût se construit
Les designers tiennent un carnet d'inspiration, et l'idée vaut pour un développeur : le goût n'est pas un don, mais une collection d'images regardées avec attention, que l'on apprend à trier. Le carnet repose sur trois habitudes.
- Collecter. Capturez ce qui accroche votre œil, sites compris, en notant leur adresse. Enregistrez plutôt que d'aimer : un « j'aime » se perd dans le flux, une capture reste.
- Sortir du flux. Les réseaux sociaux montrent ce que tout le monde voit. Une affiche, une couverture de livre ou l'interface d'un jeu vous donnent des idées que les autres portfolios n'ont pas.
- Trier et nommer. Sous chaque image, écrivez une phrase qui dit ce qui vous plaît. « Le grand titre à empattements contraste avec le petit texte à chasse fixe. » Les empattements sont les petits traits au bout des lettres, et une police à chasse fixe donne à chaque lettre la même largeur, comme dans un éditeur de code.
Le temps 1 dure cinq séances : votre carnet tient dans un dossier. Il contient les captures de vos grilles d'analyse, cinq ou six autres trouvailles dont une qui ne vient pas du web, et une phrase sous chacune. Les phrases comptent davantage que le nombre d'images, car elles deviennent les lignes de votre planche.
3. Les ressources
| Ressource | À quoi elle sert |
|---|---|
| Siteinspire | des sites classés par style, par type et par sujet |
| Minimal Gallery | des sites sobres, avec beaucoup d'air et peu de couleurs |
| Recent, anciennement Godly | des sites audacieux, rubrique Websites |
| Dark Mode Design | des sites en mode sombre, si votre planche en prévoit un |
| Brutalist Websites | des sites volontairement bruts, qui refusent les conventions |
| Fonts In Use | des polices vues dans de vrais projets, avec leur nom |
| Typewolf | des associations de polices et les polices de sites remarqués |
| Google Fonts | des polices gratuites, à essayer avec votre propre texte |
| Bunny Fonts | la plupart des polices de Google Fonts, servies par un service européen, que le kit utilise déjà |
| Coolors | générer une palette, puis l'ajuster couleur par couleur |
| Contrast Checker de WebAIM | mesurer le contraste entre deux couleurs et lire s'il atteint les seuils |
Le kit charge déjà sa police par Bunny Fonts : bunny('Instrument Sans') figure dans vite.config.ts. Vous gardez cette police ou vous la remplacez au chapitre 1.18.
4. La planche d'une page
La planche de direction artistique est le gabarit fourni qui fixe vos choix visuels sur une page. Chaque couleur, chaque police et chaque taille de votre site viendront de là. Téléchargez la planche en WordDOCX, ou en PDFPDF si vous la remplissez à la main. Elle se remplit dans cet ordre.
L'intention, en une phrase. Par exemple : « Un site calme et lisible, où les captures des projets apportent la couleur. » Chaque choix de la planche doit servir cette phrase.
Deux ou trois références. Pour chacune, notez l'adresse et ce que vous en prenez : la mise en page, les couleurs, la typographie ou le ton. Josh Comeau conseille de mélanger ce que vous prenez à deux ou trois sites, plutôt que d'en recopier un seul (podcast Scrimba, 2022).
La palette : fond, texte, accent. La couleur d'accent attire l'œil sur les liens et les boutons. Le contraste mesure l'écart de luminosité entre deux couleurs, de 1:1 pour deux couleurs identiques à 21:1 pour du noir sur du blanc.
Les règles d'accessibilité du web, les WCAG 2.2, fixent trois niveaux d'exigence. Le niveau AA, celui que le cours vise, demande 4,5:1 pour le texte courant. Il demande 3:1 pour une icône, le contour d'un champ ou la forme d'un bouton face à la page. Le texte écrit sur un bouton reste du texte : 4,5:1. Les WCAG acceptent 3:1 pour un grand texte, à partir de 24 px environ. Le cours garde 4,5:1 pour tout texte, titres compris, et vous mesurez chaque paire avec le Contrast Checker, sans l'estimer à l'œil.
| Paire | Couleurs | Contraste mesuré | Seuil visé | Atteint |
|---|---|---|---|---|
| Texte sur fond | #1C1A17 sur #FAF8F4 |
16,37:1 | 4,5:1 | oui |
| Accent sur fond, pour un lien | #D6452B sur #FAF8F4 |
4,17:1 | 4,5:1 | non |
| Accent sur fond, pour une icône | #D6452B sur #FAF8F4 |
4,17:1 | 3:1 | oui |
| Accent foncé sur fond, pour un lien | #B83A22 sur #FAF8F4 |
5,40:1 | 4,5:1 | oui |
| Fond sur accent, texte d'un bouton | #FAF8F4 sur #B83A22 |
5,40:1 | 4,5:1 | oui |
Ce rouge convient à une icône, mais pas au texte d'un lien. Le même rouge, un peu plus foncé, atteint le seuil du texte. La teinte reste la même, un peu plus sombre, et le lien devient lisible pour davantage de lecteurs. Le bouton inverse la paire : son texte clair sur l'accent foncé atteint aussi 4,5:1.
Deux polices au plus. Une pour les titres, une pour le texte, ou une seule pour les deux. Notez les graisses utilisées et l'endroit d'où vous les chargez, un seul pour tout le site. Google Fonts sert à essayer des polices. Chargez-les depuis Bunny Fonts, comme le kit, ou depuis un fichier dans le dépôt : aucun visiteur n'envoie alors son adresse IP à un tiers.
L'échelle de tailles. Cinq tailles suffisent : le titre de page, le titre de section, le sous-titre, le texte courant et le petit texte. Le rem est une unité relative à la taille de texte du navigateur, 16 px par défaut. Une échelle possible avec les classes de Tailwind : text-4xl (2,25 rem), text-2xl (1,5 rem), text-xl (1,25 rem), text-base (1 rem) et text-sm (0,875 rem).
Le mode sombre, oui ou non, et pourquoi. Un seul thème bien fini vaut mieux que deux thèmes inachevés. Le mode sombre est un bonus du portfolio. Si vous le prévoyez, sa palette a ses propres contrastes, mesurés sur le fond sombre.
Le croquis de l'accueil. Dessinez l'accueil sur papier, au crayon, puis photographiez-le et collez la photo dans la planche. Le croquis montre votre nom, vos projets et l'accès au contact.
5. Les pièges
Le chapitre 1.01 a listé des erreurs qu'un lecteur voit tout de suite. Trois se décident sur la planche, et trois autres s'y ajoutent.
| Piège | Ce que le lecteur voit | Ce que la planche décide |
|---|---|---|
| Animations gratuites | un texte qui attend la fin d'un effet pour s'afficher | aucune animation, ou une seule, avec sa raison |
| Template reconnaissable | un site déjà vu ailleurs, repris tel quel | des références mélangées, et une intention à vous |
| Trop de couleurs | des boutons et des liens qui se disputent l'attention | un fond, un texte et un accent |
| Trop de polices | une page qui change de voix d'un bloc à l'autre | deux polices au plus |
| Texte gris clair sur blanc | un texte qui disparaît, #999999 sur #FFFFFF ne fait que 2,85:1 |
chaque paire mesurée, 4,5:1 pour tout texte |
| Images de tailles différentes | une page de projets qui paraît négligée | une seule largeur de capture et un même cadrage |
Une direction artistique se reconnaît à ce qu'elle refuse. Écrivez dans la ligne « Ce que mon site n'aura pas » de la planche trois choses que votre site n'aura pas, par exemple « pas d'animation au chargement, pas de dégradé, pas de troisième couleur ».
6. À la maison
Remplissez la planche à partir de vos grilles, de la photo de la mise en commun et de votre carnet. Terminez-la avant la séance 3 : le chapitre 1.18 en a besoin pour la page publique. Avant de l'appliquer, cochez la liste « Avant d'appliquer la planche » qui termine le gabarit. Elle se remet en PDF avec le portfolio, dans le devoir Teams du temps 1.
À retenir
- La direction artistique part de vos références et de la mise en commun, pas d'une page blanche.
- Le goût se construit en collectant, en sortant du flux, puis en nommant ce qui plaît.
- La planche tient sur une page : intention, références, palette, deux polices au plus, échelle de tailles, mode sombre et croquis.
- Le contraste se mesure avec un outil : 4,5:1 pour tout texte, boutons compris, 3:1 pour une icône ou un contour.
- Une planche écrit aussi ses refus : pas d'animation gratuite, pas de troisième couleur, pas de gris clair sur blanc.