Identité visuelle : que faut-il prévoir en plus du logo ?

Distinguez le logo, l’identité visuelle et ses règles d’usage

Le logo identifie votre activité ; l’identité visuelle organise sa présentation sur vos supports. Le logo peut réunir un nom dessiné, un symbole ou les deux. L’identité ajoute notamment une palette, des choix de caractères, des proportions et des façons de disposer ces éléments. La charte graphique, ou des repères d’utilisation plus courts, documente ces choix pour pouvoir les reproduire.

Pour une petite entreprise, l’objectif est concret : retrouver une présentation cohérente entre le site, un devis et un profil professionnel, sans devoir improviser chaque mise en page. La personnalité de votre activité vient aussi de vos mots, de vos services et de vos photos. Une couleur ou une forme ne transmet pas à elle seule toute votre promesse.

Il n’existe pas un nombre de variantes qui conviendrait à tous les projets. Une activité qui utilise surtout un site et des documents numériques n’a pas les mêmes besoins qu’un commerce préparant une enseigne, des emballages et des vêtements de travail. Le périmètre utile se définit à partir de ces usages.

Partez de vos supports pour choisir les déclinaisons

Écrivez où le logo doit apparaître, puis associez une version à chaque emplacement. Une composition horizontale peut être très lisible dans un en-tête et devenir minuscule dans une image de profil carrée. La bonne réponse peut être un nom seul, un symbole simplifié ou une autre disposition des mêmes éléments.

Une déclinaison conserve des repères communs : dessin du nom, symbole, proportions et couleurs prévues. Elle ne consiste pas à étirer le logo pour remplir un cadre. Si un petit détail disparaît à taille réelle, une simplification peut être plus utile qu’un fichier plus grand.

Le favicon est l’icône du site dans le navigateur. Pour sa présence dans les résultats de recherche, Google précise notamment un format carré, une représentation de la marque et une URL stable. L’affichage dans ces résultats reste à sa discrétion : consignes officielles sur les favicons. Sa fonction première reste d’aider à reconnaître le site.

Documentez les couleurs et la typographie avec leurs usages

Une palette utile indique quelles couleurs employer ensemble. Conservez les références exactes, par exemple les codes hexadécimaux pour le web, mais précisez aussi leur rôle : fond principal, texte, accent, bouton et état de survol. Une couleur d’accent décorative peut très bien convenir au symbole et manquer de contraste pour un petit texte.

Pour le texte courant, le critère de contraste WCAG au niveau AA prévoit un rapport d’au moins 4,5:1, ou 3:1 pour les grands textes au sens de ce critère. L’exception accordée aux logos et logotypes ne s’étend pas aux paragraphes, liens ou boutons qui reprennent les couleurs de la marque. La documentation du W3C sur le contraste explique ces seuils et leurs conditions. Un contrôle de contraste ne suffit pas, à lui seul, à valider toute l’accessibilité d’un site.

Pour les caractères, notez plus que le nom de la police

Précisez la famille choisie pour les titres et pour la lecture, les graisses utilisées, l’espacement et les polices de remplacement. Vérifiez aussi les accents français, le symbole euro, les chiffres et une phrase longue. Un titre élégant dans une maquette doit rester lisible sur un téléphone, avec de vrais mots.

Demandez quels fichiers de police seront utilisés, où ils sont disponibles et dans quelles conditions vous pourrez les employer sur le site ou dans vos documents. Le nom d’une police dans une charte ne fournit pas automatiquement ses fichiers ni une autorisation pour tous les usages.

Pour les supports imprimés, demandez un contrôle spécifique

Un rendu à l’écran ne valide pas la couleur d’une carte ou d’une enseigne. Si l’impression fait partie du projet, précisez ce support dès le départ et faites préparer le fichier selon les consignes de l’imprimeur. Demandez une épreuve ou un bon à tirer lorsque cet usage le justifie.

Les photos participent également à l’ensemble. Définissez quelques repères de lumière, de cadrage et de sujet, tout en gardant les scènes fidèles à votre activité. Notre article sur le choix des photos pour un site vitrine détaille cette préparation.

Recevez des fichiers adaptés et des consignes compréhensibles

Conservez une source vectorielle et des exports prêts pour vos usages courants. Un fichier vectoriel décrit des formes et des tracés ; un fichier matriciel, comme un PNG ou un WebP, contient des pixels. Le guide MDN sur les images vectorielles explique cette différence et le rôle du SVG sur le web.

Le SVG permet de redimensionner les tracés sans agrandir une grille de pixels. Le rendu final dépend toutefois du dessin et de son intégration : la présence d’un SVG ne dispense pas d’observer le logo dans la navbar réelle. Un export matriciel bien préparé peut aussi convenir à un emplacement déterminé.

• Source vectorielle : conserver le fichier de référence, par exemple un SVG composé de tracés. Une photo ou un petit bitmap placé dans un SVG ne devient pas vectoriel.
• Exports transparents : disposer de PNG ou de WebP aux dimensions utiles, selon les logiciels et supports qui doivent les accepter.
• Favicon : recevoir les fichiers prévus pour l’intégration au navigateur, avec une forme reconnaissable en petit.
• Version d’impression : demander les formats et réglages convenus pour l’imprimeur, si ce support est prévu.
• Animation et version fixe : savoir où les utiliser, comment relancer éventuellement l’animation et quel état afficher sans mouvement.
• Repères d’utilisation : identifier la version autorisée sur chaque fond, les marges autour du logo et les déformations à éviter.

Des noms comme « logo-principal-fond-clair.svg » et « logo-monochrome.svg » aident davantage qu’une suite de fichiers « final-bis ». Faites préciser quel fichier sert de référence et qui peut effectuer les futures modifications. Pour les questions de remise, de licences et de périmètre, consultez aussi les points à clarifier sur les fichiers et les droits d’utilisation.

Exemple OOZWEB : une signature, des rôles différents

Notre identité illustre des choix de présentation pour notre propre marque. La signature principale réunit le symbole et le nom. Le symbole comporte deux anneaux entrelacés et un chevron qui rappelle le code. Le nom seul, avec son point violet, occupe moins de place dans la navigation.

La version sur fond sombre adapte les couleurs pour conserver la lisibilité. Une composition verticale répond aux emplacements plus carrés ; une version monochrome sert aux usages en une couleur. Le favicon reprend le symbole. Ces variantes gardent les mêmes repères, tout en répondant à des contraintes différentes.

Le mouvement a lui aussi un rôle précis : dans la navbar, seul le point violet s’anime brièvement. La page de présentation permet de lancer une animation plus complète et conserve une version fixe lorsque la réduction des animations est demandée. Cette préférence système peut être prise en compte avec prefers-reduced-motion, comme l’explique le W3C dans sa technique sur la réduction du mouvement.

Voir les déclinaisons et l’animation de l’identité visuelle OOZWEB. Cet exemple présente nos propres supports ; les éléments nécessaires à votre activité se définissent selon vos besoins. Un fond d’écran ou une image de profil complémentaire n’est pas automatiquement un livrable à prévoir pour chaque projet.

Testez le logo et l’ensemble à leur taille réelle

Validez une utilisation concrète, avec les fichiers reçus. Un aperçu agrandi sur fond blanc ne montre pas toutes les difficultés. Voici un parcours de contrôle que vous pouvez suivre avec votre prestataire :

1. Ouvrez le site sur téléphone. Vérifiez le nom, les détails du logo et la place laissée au menu. Regardez aussi un titre long et les boutons ; le texte ne doit pas sortir de l’écran.
2. Regardez le favicon dans un onglet. Si la signature complète devient illisible, examinez une version compacte ou un symbole simplifié.
3. Essayez les fonds réellement prévus. Testez la version claire sur le fond sombre et l’inverse. Gardez une marge autour de la signature ; ne la collez pas au bord d’un document.
4. Exportez un document habituel. Contrôlez un vrai devis en PDF et, si vous imprimez, une version en noir et blanc. Vérifiez que les éléments ne sont ni coupés ni étirés.
5. Lisez du texte courant. Contrôlez les contrastes des paragraphes, liens et boutons, puis les accents et les chiffres avec les polices retenues.
6. Essayez l’animation et son état fixe. Le nom doit rester disponible et lisible. Activez la réduction des animations sur votre appareil pour vérifier la solution prévue dans cette situation.

Si vous observez un défaut, décrivez-le précisément : fichier utilisé, support, fond, taille affichée et capture. « Le nom devient difficile à lire dans le menu à cette largeur » permet de choisir entre un ajustement du dessin, un autre export et un réglage d’intégration. Augmenter tous les logos du site n’est pas forcément la correction adaptée.

Conservez ensuite une courte page de repères validés. Elle évite de devoir reprendre ces décisions au prochain document ou lors d’un changement de personne chargée des supports.

Préparez un brief qui décrit vos usages et vos priorités

Transmettez votre activité, les supports prioritaires et les contraintes avant de demander des pistes. Vous pouvez expliquer le ton souhaité avec quelques exemples commentés : ce qui vous plaît, ce qui vous semble trop chargé et ce qui doit rester reconnaissable. Indiquez également ce qui existe déjà et ce que vous voulez conserver.

Voici un exemple fictif, pour Camille, céramiste à Liège. Ce n’est ni une cliente ni une réalisation d’OOZWEB. Le texte peut servir de point de départ à votre propre demande :

« Je présente des pièces en céramique et des ateliers en petit groupe. Mon site, mes devis et mon profil professionnel sont les premiers supports à harmoniser. Je souhaite une présentation sobre et chaleureuse, qui laisse de la place aux photos des pièces. Mon nom doit rester lisible dans l’en-tête mobile. Je dois aussi pouvoir imprimer un devis en noir et blanc. J’ai déjà un symbole que je souhaite faire examiner avant de décider de le conserver. Pour la première remise, j’aimerais identifier les versions à utiliser, les couleurs, les règles de caractères et les fichiers destinés à ces trois supports. »

Pour votre brief, ajoutez les éléments suivants :

• Le nom exact de l’activité, les mots qui peuvent accompagner le logo et les coordonnées réellement nécessaires.
• Les supports à préparer dès maintenant et ceux qui sont seulement envisagés.
• Les fichiers existants, leur provenance connue et les usages déjà autorisés.
• La personne qui valide les choix, les étapes de retour et les éléments attendus à la remise.
• Les contraintes de votre site, de vos outils de documents ou d’un imprimeur déjà choisi.

Pour un site déjà en place, commencez par examiner les fichiers disponibles et les difficultés observées. Il peut suffire de mieux organiser les variantes ou leur intégration. Si votre projet comprend aussi les textes et les photos, le guide pour préparer les contenus de votre site aide à rassembler ces éléments sans tout mélanger dans le brief graphique.

Foire aux questions