Identité visuelle avant le site : pourquoi l'ordre compte

L'essentiel

L'identité visuelle est l'ensemble des décisions qui font reconnaître une marque : logo, couleurs, polices, et les règles d'usage de chacun. Elle doit venir avant le site, parce que le site applique ces décisions sur presque tous les écrans, et chaque décision repoussée devient du retravail dans le thème, les photos, les bannières et les e-mails. Pas besoin d'un manuel énorme : pour commencer un site ou une boutique, un petit noyau, testé à l'écran, suffit. En tant que designer, le retravail que je vois le plus souvent en boutique en ligne naît là : logo changé après le thème terminé, couleur qui ne passe pas le contraste, police choisie pour l'imprimé qui pèse sur le téléphone. Ci-dessous, ce qu'est ce noyau minimum, comment tester chaque pièce pour l'écran, et comment tout transmettre au thème sans recommencer.

1. Ce qu'est l'identité visuelle, et ce qu'elle n'est pas

L'identité visuelle n'est pas seulement le logo. Le logo est une pièce ; l'identité est le système qui dit comment le logo, les couleurs, les polices, les photos et les icônes cohabitent. C'est elle qui fait reconnaître la marque sur Instagram, sur l'emballage, dans l'e-mail de confirmation et sur la page produit, sans lire le nom.

Ce n'est pas non plus la même chose qu'une marque déposée. Pour l'INPI, la marque est « un nom et/ou une image qui identifie un produit ou un service ». L'enregistrement protège ce nom ou cette image. L'identité visuelle est la façon d'appliquer tout cela au quotidien. Les deux se parlent, et c'est pour cela que la recherche de marque vient avant le design (voir la section 6).

En pratique, quand quelqu'un demande « un site » sans identité définie, le projet cache deux travaux dans un seul : décider la marque et construire le site. Si les deux avancent ensemble sans ordre, c'est le thème choisi qui décide la marque, et non l'entreprise.

Si vous préparez une boutique en ligne à partir de zéro, la page sur la création de boutiques et de projets e-commerce montre où l'identité entre dans le projet, avec la plateforme, le catalogue et les intégrations.

2. Ce qui déraille quand le site passe en premier

Le site semble la pièce principale, alors beaucoup de gens commencent par lui. Le problème est que le site est la pièce qui dépend le plus des autres. Voici les retravaux les plus courants quand l'identité arrive après :

• Couleur changée au milieu du projet. Le thème a été réglé avec une couleur provisoire. Quand la vraie couleur arrive, bouton, lien, pastille de promotion, bannière et icône doivent être revus, et certains ont déjà été exportés en image.
• Logo qui ne tient pas dans l'en-tête. Logo horizontal très long, pensé pour une façade ou une carte, qui devient minuscule sur le téléphone. Ou logo au détail fin qui disparaît à la taille du favicon.
• Photos sans direction. Sans règle de fond, de lumière et de cadrage, chaque lot de photos sort d'une façon différente, et la vitrine semble montée par plusieurs boutiques distinctes.
• Police changée ensuite. Une nouvelle police change la largeur du texte : un titre qui tenait sur une ligne se coupe, le bouton devient serré, le menu déborde sur le téléphone.
• Bannières refaites. Tout visuel fait avec l'identité provisoire doit être refait.

Aucun de ces problèmes n'est grave seul. Additionnés, ils consomment du temps de projet sur quelque chose qui n'améliore pas la boutique, et ne fait que défaire une décision précédente.

La cohérence est ce que le client perçoit

Le Nielsen Norman Group décrit la cohérence comme l'une des dix heuristiques d'utilisabilité : l'utilisateur ne devrait pas avoir à se demander si des mots, des situations ou des actions différents signifient la même chose. Il sépare la cohérence interne (dans le produit lui-même) et externe (avec les conventions du marché). Une identité visuelle définie avant est ce qui permet la cohérence interne : le même vert veut toujours dire « acheter », le même style d'icône apparaît partout, et le client apprend la boutique une seule fois.

3. Le minimum d'identité dont le site a besoin

Pour commencer un site ou une boutique, l'identité n'a pas besoin d'être complète. Elle a besoin d'un noyau qui répond aux questions que le thème va poser. Le tableau ci-dessous est ce que je demande avant d'ouvrir l'éditeur de thème.

Le favicon est un bon exemple de la raison pour laquelle cette liste vient avant. Google demande un favicon carré et dit qu'il doit représenter visuellement la marque du site. Shopify recommande 32 x 32 px et réduit les images plus grandes à cette taille. Un logo horizontal avec le nom entier ne fonctionne pas dans un carré de cette taille. Si personne n'a dessiné un symbole, le favicon devient un bricolage : la première lettre du nom dans une police quelconque.

Ce qui peut attendre

Papeterie, signalétique, uniforme, manuel complet d'application, version animée du logo. Tout cela est utile, mais ne bloque pas le site. Ce qui bloque le site, c'est le noyau du tableau.

4. Couleur : une palette qui fonctionne à l'écran

Une couleur choisie pour l'imprimé ne fonctionne pas toujours à l'écran, et une couleur belle dans le logo ne fonctionne pas toujours sur un bouton. Le test qui compte pour le site est le contraste.

Le critère 1.4.3 des WCAG, la référence d'accessibilité du W3C, demande un contraste d'au moins 4,5:1 pour le texte normal et de 3:1 pour le grand texte (à partir de 18 points, ou de 14 points en gras). Le critère 1.4.11 demande 3:1 pour les composants d'interface, comme la bordure d'un champ, une icône et l'état d'un bouton.

Deux conséquences pratiques :

• La couleur de la marque peut ne pas servir de fond de bouton avec du texte blanc. Les couleurs claires, comme le jaune et le vert clair, tendent à échouer avec du texte blanc ; le test de contraste le confirme au cas par cas. La solution n'est pas de changer la marque : c'est de définir une variation plus sombre pour l'interface, ou d'utiliser un texte sombre sur la couleur.
• Le logo est exempté, le bouton ne l'est pas. Le W3C dit clairement que les logos sont exemptés des exigences de contraste, parce qu'ils suivent l'identité de la marque. Mais quand le logo est cliquable, le W3C lui-même suggère d'utiliser une variante au contraste suffisant. C'est pour cela que l'identité doit prévoir des versions du logo pour fond clair et fond sombre.

Comment composer la palette pour le site

1. Couleur principale, avec une version « interface » qui passe le contraste avec du texte blanc ou noir.
2. Neutres : un presque noir pour le texte, deux ou trois gris pour les bordures et les fonds, blanc ou presque blanc pour le fond général.
3. Couleurs d'alerte : succès, erreur et avertissement, qui ne se battent pas avec la couleur principale. Si la marque est rouge, le rouge d'erreur doit être assez différent pour ne pas confondre.
4. Testez chaque paire (texte sur fond) dans un outil de contraste avant de l'emmener dans le thème.

Si vous allez ouvrir la boutique et que la marque n'est pas encore décidée, envoyez la plateforme que vous comptez utiliser et ce que vous avez déjà comme logo et comme couleur. Je vous dirai ce qui bloque le site et ce qui peut attendre.

Parler du projet

5. Typographie : peu de familles, peu de graisses

La police est à la fois identité et performance. Chaque famille et chaque graisse est un fichier que le navigateur doit télécharger avant d'afficher le texte comme il faut.

web.dev, de Google, résume la règle ainsi : la police la plus rapide à livrer est celle que le site ne demande même pas. Le même guide explique que retarder le texte peut retarder le chargement de la page, et que le passage entre la police provisoire et la police finale peut pousser la mise en page quand les deux occupent des espaces différents. Il rappelle aussi que le format WOFF2 compresse 30 % mieux que le WOFF.

Pour l'identité, cela devient trois décisions :

• Une ou deux familles, pas quatre. Une pour le titre et une autre pour le texte, ou une seule avec des graisses différentes.
• Peu de graisses. Regular, gras, et peut-être une intermédiaire. Chaque italique et chaque graisse en plus est un fichier de plus.
• Une police de texte pensée pour le petit écran. Une police de titre très condensée ou décorative peut être superbe sur la bannière et illisible sur le prix en plusieurs fois, en petit caractère.

Choisissez aussi une police dont vous avez la licence pour le web. Une police achetée pour l'imprimé n'inclut pas toujours l'usage sur un site ; vérifiez les conditions avant de figer l'identité.

6. Cherchez la marque avant de dessiner et de publier

Avant d'investir dans un logo, un domaine, un emballage et un site, il vaut la peine de savoir si le nom peut être utilisé. Le guide basique de l'INPI place comme premier pas de l'enregistrement la recherche des marques déjà existantes. L'enregistrement donne au titulaire le droit d'usage exclusif sur tout le territoire national et vaut dix ans, avec prorogation pour des périodes égales.

Pour le design, l'ordre compte pour une raison simple : si le nom entre en conflit avec une marque déjà enregistrée dans le même secteur, tout ce qui a été dessiné dessus peut devoir changer. Logo, domaine, profil de réseau social, façade et le site entier. Faire la recherche avant coûte peu de temps et évite de refaire l'identité avec la boutique déjà en ligne.

L'enregistrement de marque est une question juridique. Le rôle du designer ici est seulement de rappeler que cette étape existe et qu'elle vient avant le travail visuel lourd, pas après.

7. Du manuel au thème : des décisions qui deviennent des réglages

Une identité définie est la moitié du chemin. L'autre moitié est d'emmener les décisions dans le site de façon qu'elles soient appliquées toujours de la même manière, et non copiées à la main sur chaque page.

Réglages globaux du thème

Sur Shopify, les réglages du thème réunissent les couleurs (en palettes ou en schémas de couleur, selon le thème), la typographie, le logo, le favicon et les réseaux sociaux, et les changements valent pour toute la boutique. C'est exactement le noyau du tableau de la section 3. Si l'identité arrive prête, ce réglage se fait une fois, au début, et toutes les sections du thème héritent des mêmes couleurs et des mêmes polices. Si elle arrive après, quelqu'un doit chercher couleur et police ajustées à la main dans des sections isolées.

D'autres plateformes et des sites faits sur mesure ont le même concept sous d'autres noms. L'article sur Tray et Shopify : limites du HTML, du thème et de l'intégration montre à quel point ce que vous pouvez modifier dans le thème change d'une plateforme à l'autre.

Design tokens : l'identité dans un format que le code comprend

Un design token est le nom donné à une décision de design gardée comme donnée : « couleur-principale = ce vert », « police-titre = cette famille », « rayon-de-bordure = cette valeur ». Au lieu que le développeur copie le code de la couleur depuis le PDF du manuel, il utilise le nom du token, et changer la couleur ensuite revient à changer une seule valeur.

Le Design Tokens Community Group, du W3C, a publié en octobre 2025 la première version stable d'un format commun de tokens en JSON, pensé pour transporter les décisions de design entre outils et produits. Pour une petite boutique cela peut sembler lointain, mais l'idée vaut à toute taille : l'identité devrait sortir du design avec des noms clairs pour chaque couleur et chaque police, et non comme une jolie image de palette.

Ce qu'il faut remettre au développeur

• Logo en vecteur (SVG), version horizontale et symbole, pour fond clair et fond sombre.
• Liste de couleurs avec nom et code, y compris la version interface de la couleur principale.
• Nom des polices, graisses utilisées et où les télécharger avec une licence web.
• Deux ou trois photos de référence montrant la direction photo.
• Exemple de bouton, de champ et de carte appliqués, pour que personne n'ait à deviner.

8. Quand on peut faire les deux en même temps

Tous les projets n'ont pas le temps de faire l'identité entière avant. Parfois la boutique doit ouvrir à une date, ou le propriétaire veut valider le produit avant d'investir dans la marque. On peut les faire ensemble, à deux conditions :

1. Le noyau de la section 3 vient d'abord, même s'il est simple. Logo provisoire, mais avec version horizontale et symbole ; une couleur principale testée en contraste ; une famille de police. Le reste peut évoluer.
2. Tout entre par les réglages globaux et par les tokens. Si l'identité change ensuite, le changement se fait à un seul endroit, pas page par page.

Ce qui ne fonctionne pas, c'est de dessiner le site avec « n'importe quelle couleur pour l'instant » dispersée à la main et d'espérer que le remplacement ensuite soit rapide. Il ne l'est pas. La vitesse compte aussi : si votre cas est un site institutionnel lourd, l'article sur WordPress headless et la vitesse d'un site institutionnel montre où le choix du thème et des polices pèse sur le chargement.

Questions fréquentes

Puis-je créer le site et faire l'identité visuelle ensuite ?

Oui, mais vous paierez en retravail. Couleurs, polices, logo et photos apparaissent sur presque tous les écrans du site, et les changer ensuite signifie tout revoir. Si le délai presse, définissez au moins le noyau minimum (logo horizontal, symbole, couleur principale testée et police) avant de configurer le thème.

Combien de couleurs une identité visuelle doit-elle avoir pour le site ?

Il n'y a pas de nombre fixe. Pour que le site fonctionne, il vous faut une couleur principale avec une version interface qui passe le contraste, quelques neutres pour le texte, le fond et la bordure, et des couleurs d'alerte pour le succès, l'erreur et l'avertissement.

Le logo doit-il passer le test de contraste ?

Le W3C laisse les logos exemptés des exigences de contraste des WCAG. Mais quand le logo est un lien, il recommande d'utiliser une variante au contraste suffisant. C'est pour cela qu'il vaut la peine d'avoir une version du logo pour fond clair et pour fond sombre.

Quelle taille pour le favicon ?

Google demande un favicon carré et recommande qu'il soit plus grand que 48 x 48 px. Shopify recommande 32 x 32 px et réduit les images plus grandes. En pratique, dessinez un symbole simple qui reste lisible tout petit.

Faut-il enregistrer la marque avant de faire le site ?

L'enregistrement n'est pas obligatoire pour avoir un site, mais la recherche de marque à l'INPI devrait venir avant d'investir dans l'identité et le site. Si le nom a un conflit, tout ce qui a été dessiné dessus peut devoir changer. Pour l'enregistrement lui-même, demandez un avis juridique.

Conclusion

L'identité visuelle vient avant le site parce que le site est l'endroit où elle se répète le plus : dans chaque bouton, chaque prix, chaque bannière et chaque e-mail. Un petit noyau testé pour l'écran (logo en deux versions, symbole, couleur principale avec contraste, peu de polices et direction photo) évite déjà la plus grande partie du retravail. Si vous allez ouvrir une boutique en ligne et que vous décidez encore la marque et la plateforme, envoyez ce que vous vendez, ce que vous avez déjà comme marque et le délai dont vous avez besoin. Voyez d'abord comment fonctionne la création de boutiques et de projets e-commerce. Si vous n'avez pas encore créé la boutique Shopify, parlez-moi avant de la créer : la boutique naît en boutique de développement, est montée prête et transférée à votre nom.

Parler du projet