Directions artistiques et Score Design
Sommaire
Une direction artistique donne à ton site un univers complet : palette, police de titre, taille des titres, coins, composition de la bannière, mise en page des atouts. Cette leçon t'apprend à choisir parmi les 12 directions, à les ajuster, à en faire imaginer trois par l'IA et à viser 100 au Score Design, avec Atelier Nova en exemple.
Ce que tu sauras faire
Donner un univers à ton site
Choisir et ajuster l'une des 12 directions, en direct sur ton site.
Faire proposer 3 directions
Décrire ton activité et laisser l'IA partir de ton monde concret.
Viser 100 au Score Design
Comprendre chaque vérification et corriger une page.
Thème ou direction artistique, ce qui change
Un thème change surtout des couleurs ; une direction artistique change tout l'univers, à partir d'une idée concrète : la ville la nuit, l'atelier de céramique, le quotidien du matin. Le HTML, lui, ne bouge pas : adresses et données structurées restent identiques.
| Thème classique | Direction artistique | |
|---|---|---|
| Couleurs | Une couleur principale | 5 couleurs : fond, bandes et cartes, texte, texte secondaire, accent |
| Police des titres | Police du système | 18 polices de caractère téléchargées une fois, ou une police système |
| Mise en page | En-tête et listes | En plus : casse, taille des titres, coins, espacement, cartes, bannière, atouts, sections, icônes |
| Mode sombre | Automatique ou toujours clair | La direction fixe un fond clair ou sombre |
Les 12 directions et leur univers
| Direction | Univers | Police de titre | Fond |
|---|---|---|---|
| Nocturne | La ville la nuit : bleu profond, lumière ambrée | Big Shoulders Display, en capitales | Sombre |
| Galerie | Murs blancs, cartels noirs, un rouge de signalétique | Familjen Grotesk | Clair |
| Argile | L'atelier de céramique : sable, terre cuite, formes douces | Young Serif | Clair |
| Botanique | L'herbier et la serre : vert profond, papier sauge | DM Serif Display | Clair |
| Affiche | L'affiche suisse : noir sur blanc cassé, orange vif | Archivo Black, en capitales | Clair |
| Riviera | Le bord de mer : bleu marine, ciel pâle, corail | Gloock | Clair |
| Cabinet | Le papier à en-tête : encre marine, bordeaux, filets fins | Libre Caslon Display | Clair |
| Néon | L'écran de création la nuit : quasi-noir, vert citron | Unbounded | Sombre |
| Douceur | Le cabinet de soin : poudre rosée, prune, beaucoup d'air | Cormorant Garamond | Clair |
| Chantier | Béton, jaune de sécurité, signalétique condensée | Barlow Condensed, en capitales | Clair |
| Récréation | La cour d'école : bleu ciel, rouge tomate, lettres rondes | Fredoka | Clair |
| Presse | Le quotidien du matin : papier journal, rouge de une | Newsreader | Clair |
Pour Atelier Nova, Argile semble écrite pour lui : fond sable, accent terre cuite, police Young Serif, cartes à ombre portée et bannière « Éditorial : image verticale ». Ne t'arrête pas au nom : Riviera ou Presse conviennent aussi, selon le ton voulu.
Comment choisir et ajuster une direction artistique ?
- Ouvre Réglages › Apparence et, dans Style du site, choisis Direction artistique.
- Clique sur l'une des 12 cartes : l'aperçu en direct montre ton vrai site, sur Ordinateur ou sur Mobile.
- Déplie Ajuster la direction : couleurs, polices, mises en page et modifie ce que tu veux. L'aperçu suit chaque changement.
- Clique sur Enregistrer. Rien n'est publié avant.
| Réglage | Choix possibles |
|---|---|
| Couleurs | Fond, Bandes et cartes, Texte, Texte secondaire, Accent |
| Police des titres | 18 polices de caractère, ou une police système |
| Police du texte | 6 polices système : Système, Humaniste, Géométrique, Arrondie, Serif moderne, Serif élégante |
| Casse des titres | Normale, Capitales |
| Taille des titres | Discrète, Équilibrée, Spectaculaire |
| Coins | Droits, Adoucis, Ronds |
| Espacement | Serré, Normal, Aéré |
| Cartes | Filet fin, Aplat de couleur, Ombre portée |
| Bannière d'accueil | Texte et image côte à côte, Affiche, Image plein cadre, Éditorial, Centrée |
| Bloc « Atouts » | Cartes, Rangées, Colonnes à filet |
| Sections | Fond uni, Bandes de couleur |
| Icônes des atouts | Icônes dessinées, Sans icône, Émojis |
Les 18 polices de titre ont chacune leur personnalité. Avec empattements : Bodoni Moda, Cormorant Garamond, DM Serif Display, Young Serif, Gloock, Libre Caslon Display, Newsreader. Égyptienne : Zilla Slab. Sans empattement : Bricolage Grotesque, Schibsted Grotesk, Familjen Grotesk, Archivo Black, Syne, Unbounded, Sora. Condensées : Big Shoulders Display, Barlow Condensed. Arrondie : Fredoka.
Contraste et vitesse, ce qu'Éclair garantit
Toujours lisible : quelles que soient les couleurs choisies, par toi ou par l'IA, Éclair ajuste le texte pour atteindre un contraste de 7:1 sur le fond, et le texte secondaire, les liens et les boutons pour atteindre 4,5:1, y compris sur les fonds teintés de la couleur d'accent (pastilles, menu, surlignage). Ce calcul a été vérifié sur 20 000 palettes tirées au hasard.
Toujours rapide : la police de titre, de 12 à 27 Ko, est téléchargée une seule fois par ton serveur depuis Fontsource (licence SIL Open Font License), rangée dans media/fonts/, puis servie par ton site et préchargée. Tes visiteurs n'appellent aucun service tiers et la mise en page ne saute pas. Seules les règles CSS utiles à ta direction sont insérées dans la page. Mesuré avec Lighthouse : 100 dans les quatre catégories avec Nocturne, Riviera, Presse et Affiche.
Imagine ma direction avec l'IA
Quand l'assistant IA est activé, le champ Imagine ma direction avec l'IA apparaît sous les cartes. Décris ton activité, ton public et l'ambiance voulue en une ou deux phrases, puis clique sur Proposer 3 directions. Voici la description d'Atelier Nova :
Atelier de céramique à Lyon, cours pour adultes débutants et pièces sur commande.
Ambiance calme et lumineuse, entre matière brute et gestes précis.L'IA lit aussi la présentation de ton site et ton profil éditorial, puis suit la méthode d'Impeccable :
- partir du monde concret de l'activité : lieux, matières, objets, lumière ;
- donner à chaque proposition une référence précise ;
- proposer trois directions vraiment différentes ;
- éviter les clichés de la catégorie et les tics du « design généré par IA ».
Les trois propositions s'ajoutent en tête des cartes, marquées ✦ : clique pour les voir dans l'aperçu, ajuste, puis enregistre celle qui te plaît. L'IA ne choisit que parmi les réglages d'Éclair et n'écrit jamais de CSS : chaque proposition est vérifiée et ses contrastes corrigés. Le coût indicatif s'affiche avec le champ, environ 0,03 $ avec Claude Sonnet 5.5, déduit du budget de l'assistant.
Comment viser 100 au Score Design ?
Dans l'éditeur, l'onglet Analyse affiche un troisième anneau, Design, à côté du SEO et du GEO. Il vérifie que la page tient la route visuellement. La note de l'onglet fait la moyenne des trois anneaux, et la liste place les points rouges en premier.
| Vérification | Ce qui est attendu |
|---|---|
| Hiérarchie des intertitres | Aucun saut de niveau : H2, puis H3, puis H4 |
| Longueur des intertitres | 12 mots au plus, sans émoji décoratif |
| Titre de bannière | 8 mots au plus, 6 si ta direction met les titres en capitales |
| Bannière | Un bouton d'action, et une image si la composition est « plein cadre » ou « éditorial » |
| Appels à l'action | 3 boutons au plus sur la page |
| Bloc « Atouts » | 3 à 6 éléments décrits, avec des émojis qui ont leur icône dessinée |
| Texte | Pas de phrases en majuscules, pas de formules creuses, pas d'abus de tirets cadratins |
| Répétitions et rythme | Aucun passage répété à l'identique, pas plus de 350 mots de paragraphes d'affilée |
| Site | Une direction artistique choisie |
Les formules creuses sont les superlatifs vagues et le jargon publicitaire que l'analyse repère dans la langue de la page : remplace-les par un fait concret. Pour les atouts, choisis des émojis qui ont une icône dessinée : un émoji sans équivalent n'affiche rien, et l'analyse te le signale.
Exemple : avec Argile, l'accueil d'Atelier Nova affiche « Ajoute une image à la bannière : la composition de ta direction artistique en a besoin. » La composition éditoriale attend une photo verticale : une fois celle d'un tour de potier ajoutée, le point passe au vert.
La méthode et les garde-fous du Score Design comme des propositions de l'IA sont adaptés d'Impeccable, de Paul Bakaus, publié sous licence Apache 2.0.
À retenir
- Une direction artistique change l'univers complet du site, sans toucher au HTML.
- Les 12 directions s'ajustent : 5 couleurs, 18 polices de titre, compositions de bannière et d'atouts.
- Les contrastes sont garantis : 7:1 pour le texte, 4,5:1 pour le reste.
- La police est téléchargée une fois par ton serveur, puis servie par ton site.
- Le Score Design se lit dans l'onglet Analyse : corrige d'abord les points rouges.
Pour aller plus loin
- Thèmes et apparence : les réglages communs, comme l'en-tête, les listes, le logo et le pied de page.
- Le CSS personnalisé : retoucher un détail que les réglages de la direction ne couvrent pas.
- Performance : garder 100 sur 100 : le poids des polices et du CSS, mesuré et expliqué.
- Sources : la méthode Impeccable de Paul Bakaus, et le catalogue Fontsource d'où viennent les polices.
Questions fréquentes
Une direction artistique ralentit-elle mon site ?
Très peu : une seule police de titre de 12 à 27 Ko, servie par ton site, et seulement les règles CSS utiles. Lighthouse reste à 100 avec Nocturne ou Presse, par exemple.
Puis-je revenir à mon thème classique ?
Oui : choisis Thème classique et enregistre, les réglages de ton ancien thème sont restés intacts. Note tes couleurs avant si tu as ajusté ta direction, car elle n'est pas conservée quand tu repasses au thème classique.
L'IA peut-elle abîmer mon site en proposant une direction ?
Non : ses propositions passent par les mêmes vérifications que tes propres réglages, contrastes compris. Rien n'est enregistré tant que tu ne cliques pas sur Enregistrer.
Le Score Design compte-t-il pour Google ?
Non, c'est un indicateur pour toi, calculé dans l'éditeur. Il n'entre ni dans le score SEO ni dans le score GEO.