Charte graphique : logo, couleurs, polices et menu

Module 4: Pages, apparence et fonctionnalités · Temps de lecture : 8 minutes

Objectif pédagogique : À l'issue de cette leçon, vous savez régler dans le panneau Charte graphique votre nom et votre logo, la favicon, le style, le design du menu, les couleurs, les polices, le mode sombre et l'animation, et vous vérifiez que le texte de votre site est bien lisible.

Notions clés : charte graphique, style (look), logo, logotype graphique, logotype typographique, favicon, barre de menu, couleur principale, contraste, rapport de contraste, WCAG, licence web, mode sombre, animation

Pourquoi une charte graphique est plus qu'une question d'esthétique

Une charte graphique est la combinaison fixe de logo, de couleurs et de polices grâce à laquelle on vous reconnaît. Sur un site web, elle assure la reconnaissance (les mêmes couleurs sur la camionnette, le devis et le site) et doit rester lisible : un texte gris clair sur fond blanc paraît sobre, mais beaucoup de visiteurs le lisent mal, surtout sur un téléphone en plein soleil.

Tout ce qui se trouve dans le panneau Charte graphique est gratuit et immédiatement visible dans l'aperçu. Ce n'est qu'en cliquant sur Enregistrer que cela devient une nouvelle version (leçon 3.5). Pour revenir en arrière, cliquez sur Rétablir ou restaurez une version plus ancienne.

Le panneau comporte les blocs suivants : Style, Couleurs, Polices, Barre de menu, Nom et logo, Images, Forme et espacement, Polices et tailles, Mode sombre et Animation.

Nom, logo et favicon

Dans Nom et logo figure le nom de votre site, tel qu'il apparaît dans l'en-tête et le pied de page. En dessous se trouve le logo :

• Importer votre propre logo : PNG à fond transparent, SVG, JPG ou WebP, jusqu'à 2 MB. Un logo horizontal fonctionne le mieux dans une barre de menu.
• Si vous n'avez pas de logo, l'outil a créé un logotype typographique : votre nom dans votre propre police et vos couleurs. Il s'adapte automatiquement si vous les modifiez.
• Faire créer un logo par l'IA : vous décrivez brièvement votre entreprise et l'ambiance souhaitée (« entreprise de peinture dans un village, artisanale et fiable ») et cliquez sur Concevoir trois logos. Vous obtenez trois logotypes graphiques (un symbole sans texte) dans vos couleurs, accompagnés de votre nom dans votre police. L'ensemble coûte 1 modification. Choisissez-en un avec Utiliser, ou indiquez ce qui peut être amélioré (« le premier, mais plus arrondi ») et cliquez sur Concevoir trois nouveaux logos ; c'est une nouvelle série de 1 modification.
• Affichage dans le menu et le pied de page : Logo et nom, Logo uniquement ou Nom uniquement, et la Taille (Petit, Normal, Grand).

L'outil vous avertit si un logo comporte des traits fins ou offre peu de contraste avec votre barre de menu : en petit dans la barre, il risque alors de disparaître.

Vérifiez vous-même un logo créé par l'IA : ne ressemble-t-il pas trop au logo d'une autre entreprise ?

La favicon est la petite icône affichée dans l'onglet du navigateur et dans les favoris. Choisissez Automatique : initiale dans vos couleurs, Votre logo ou Fichier personnalisé (carré, PNG, SVG ou ICO, jusqu'à 512 KB).

Style et barre de menu

Un style (appelé aussi look dans l'outil) détermine en un clic les polices, les formes, les boutons, les cartes, le menu et la décoration. Il en existe douze, comme Frais, Chaleureux, Professionnel, Nature, Atelier et Nuit. Vos propres couleurs sont conservées lorsque vous changez de style ; si vous voulez aussi les couleurs du style, cliquez sur Utiliser aussi les couleurs de ce style. Le style Nuit est toujours sombre.

Sous Barre de menu, vous choisissez la forme de la barre affichée en haut de chaque page, parmi quinze designs : pleine largeur, centrée, scindée, sur deux lignes, barre de couleur, encadrée, pilule, avec barre supérieure, transparente, minimale, flottante, par rubriques, segmentée, plein écran et menu latéral. Le contenu du menu (leçon 4.1) reste le même. Quelques points d'attention tirés des explications de l'outil lui-même :

• Transparent n'est réussi que si chaque page possède un bandeau d'accueil sombre ou un bandeau d'accueil avec photo.
• Minimal n'affiche que votre nom et un bouton ; les liens vers les pages se trouvent alors dans le pied de page.
• Avec barre supérieure place le téléphone et les horaires d'ouverture dans une fine barre au-dessus. Ce numéro de téléphone est-il correct ?

Sous Couleur de la barre de menu, vous choisissez Automatique (suit le style), Blanc, Gris clair, Foncé ou Couleur d'accent. Pour une autre couleur, faites la demande dans le chat.

Couleurs et contraste

Sous Couleurs, vous réglez la couleur principale (boutons, accents), une deuxième couleur pour les dégradés et l'arrière-plan (blanc, crème, froid, gris ou une nuance de votre couleur, ou à choisir vous-même). Avec Boutons avec dégradé de couleurs, tous les boutons principaux reçoivent un dégradé d'une couleur vers l'autre.

C'est ici qu'intervient le contraste : la différence de luminosité entre le texte et l'arrière-plan. On l'exprime sous forme de rapport de contraste, de 1:1 (aucune différence) à 21:1 (noir sur blanc). La norme internationale pour des sites web accessibles, les WCAG du W3C, exige au niveau AA au moins 4,5:1 pour un texte normal et 3:1 pour un grand texte (environ 18 points, ou 14 points en gras). Les boutons et autres éléments de commande doivent atteindre au moins 3:1 par rapport à leur environnement.

L'outil y veille pour vous. Si vous choisissez une couleur sur laquelle le texte se lit mal, il l'ajuste et indique ce qui a changé, par exemple : « La couleur du texte ... est devenue ..., car sinon le texte n'est pas bien lisible. » Si vous voulez conserver exactement vos propres couleurs, activez Conserver exactement ces couleurs : vos couleurs restent, et le texte placé dessus reçoit automatiquement une couleur lisible. Dans les sections que l'IA crée avec une mise en forme personnalisée, l'outil corrige aussi les couleurs de texte qui passent sous 4,5:1 (3:1 pour un grand texte).

Ce que l'outil n'évalue pas : le texte dans une photo ou dans votre logo, et un titre placé sur une photo chargée. Vérifiez-les vous-même, sur un téléphone. Si vous avez un doute sur une paire de couleurs, saisissez les deux codes couleur dans un vérificateur de contraste (voir Pour aller plus loin).

Piège : une couleur de charte graphique venant d'un imprimeur ou d'une camionnette (par exemple un jaune vif) convient rarement comme couleur de texte. Utilisez-la comme accent ou comme aplat, et gardez le texte foncé.

Polices et police personnalisée

Sous Polices, vous choisissez une police pour les Titres et une pour le Texte courant. Les polices sont stockées sous forme de fichiers sur votre propre site ; aucune connexion n'est établie avec un service de polices tiers. Sous Polices et tailles, vous réglez avec des curseurs pour l'ensemble du site : l'interligne et l'espacement des lettres du texte et des titres, le nombre de caractères par ligne, la largeur du contenu et la graisse des titres. Comme le style remet un curseur à sa valeur d'origine. Sous Taille du texte, vous choisissez Normale, Grande ou Très grande ; vous pouvez aussi le demander dans le chat (« agrandis le texte »).

Une police personnalisée est également possible : importez-la sous Polices ou avec le trombone dans le chat, au format .woff2, .woff, .ttf ou .otf, jusqu'à 2 MB par fichier (plusieurs graisses sont autorisées). Vous choisissez ensuite son usage : titres, texte ou les deux. C'est gratuit. Une police provenant d'un service comme Adobe Fonts n'est pas possible.

Important : n'importez qu'une police pour laquelle vous disposez d'une licence web. Une police est un logiciel soumis à une licence. Une licence d'utilisation sur votre ordinateur (pour créer des imprimés) n'autorise pas toujours, loin de là, la mise en ligne du fichier sur un site web, où chaque visiteur le télécharge. Vérifiez dans les conditions de licence si l'usage web est autorisé. Les polices sous SIL Open Font License peuvent, elles, être intégrées et diffusées.

Mode sombre et animation

Sous Mode sombre, vous choisissez Désactivé (toujours clair), Toujours sombre ou Selon l'appareil. Avec cette dernière option, un visiteur dont le téléphone ou l'ordinateur est réglé en mode sombre voit une version sombre de vos propres couleurs. Vous pouvez choisir vous-même l'arrière-plan, le texte et la couleur principale en mode sombre. Il n'existe pas de bouton permettant aux visiteurs de basculer eux-mêmes. L'aperçu suit votre appareil : réglez votre téléphone ou votre ordinateur en mode sombre pour voir la version sombre, et vérifiez alors aussi votre logo.

Sous Animation, vous choisissez Activée, Douce ou Désactivée pour l'ensemble du site, et si nécessaire une exception par page. Vous choisissez aussi ici l'Effet de souris sur ordinateur (aucun, aimant ou halo lumineux). Dans l'aperçu, tout est immobile ; avec Lire l'animation, vous la voyez une fois. Si un visiteur a demandé moins d'animations sur son appareil, tout reste immobile. Trop d'animation distrait ; sur une page avec beaucoup de texte, Douce ou Désactivée est souvent préférable.

Dans l'outil : comment procéder

1. Ouvrez Charte graphique, bloc Nom et logo. Cliquez sur Importer votre propre logo ou sur Faire créer un logo par l'IA.
2. Sous Favicon, choisissez votre logo ou l'initiale automatique.
3. Essayez deux ou trois styles sous Style ; regardez aussi en Mobile.
4. Sous Barre de menu, choisissez un design et une couleur.
5. Sous Couleurs, réglez votre couleur principale. Lisez les messages de l'outil.
6. Vérifiez sous Mode sombre et Animation ce que vous souhaitez.
7. Cliquez sur Enregistrer et remettez votre site en ligne.

Résumé

• Le panneau Charte graphique est gratuit ; Enregistrer crée une nouvelle version.
• Un logo créé par l'IA coûte 1 modification pour trois propositions ; la favicon est créée par l'outil ou vous en importez une.
• Douze styles et quinze designs de menu ; le contenu du menu reste le même.
• Les WCAG exigent au moins 4,5:1 de contraste pour un texte normal et 3:1 pour un grand texte ; l'outil y veille, sauf dans les photos et votre logo.
• Une police personnalisée uniquement avec une licence web ; réglez le mode sombre et l'animation selon les besoins de vos visiteurs.

Quiz

Exercice

Exercice D4.2 : Votre identité visuelle et le contraste. Réglez votre charte graphique et mesurez le contraste de vos principales paires de couleurs.

Checklist :

• [ ] logo importé ou choisi parmi les propositions de l'IA ;
• [ ] favicon réglée et vue dans l'onglet du navigateur de votre site en ligne ;
• [ ] style et design du menu choisis, vérifiés en Mobile ;
• [ ] couleur principale réglée et messages de l'outil lus ;
• [ ] contraste de la couleur du texte sur l'arrière-plan et du texte des boutons sur la couleur des boutons mesuré avec un vérificateur de contraste ;
• [ ] mode sombre et animation choisis en connaissance de cause ;
• [ ] charte graphique enregistrée et site remis en ligne.

Questions :

1. Quels rapports de contraste avez-vous mesurés pour le texte sur l'arrière-plan et pour le texte des boutons sur les boutons, et atteignent-ils 4,5:1 ?
2. À quel endroit de votre site du texte est-il placé sur une photo, et est-il bien lisible sur un téléphone ?
3. Utilisez-vous une police personnalisée ? À quel endroit de la licence est-il indiqué que l'usage web est autorisé ?

Après « terminé », vous verrez un exemple de réponse : Schildersbedrijf Example a mesuré 14,5:1 pour le gris foncé sur blanc et 5,1:1 pour le texte blanc sur le bouton vert, tous deux au-dessus de 4,5:1 ; le titre sur la photo du bandeau d'accueil se lisait mal, il a donc choisi une photo plus sombre ; pas de police personnalisée, donc aucune licence nécessaire.

Pour aller plus loin

• Understanding Success Criterion 1.4.3: Contrast (Minimum) (W3C, en anglais) : https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
• Understanding Success Criterion 1.4.11: Non-text Contrast (W3C, en anglais) : https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html
• Contrast Checker (WebAIM, en anglais) : https://webaim.org/resources/contrastchecker/
• SIL Open Font License, texte officiel (en anglais) : https://openfontlicense.org/open-font-license-official-text/