Un logo est validé sous la forme d'un seul dessin, puis il doit tenir dans un en-tête de site, un avatar carré, un onglet de navigateur de 16 pixels, une casquette brodée et une photo sombre. Un seul fichier ne peut pas tout faire, alors chaque identité se livre sous la forme d'une petite famille de déclinaisons. Livrez-en trop peu et le client tasse le logo complet dans un avatar ; livrez-en trop et il choisit au hasard. Ce guide présente chaque déclinaison et son usage, combien il en faut à un client, comment les nommer et les documenter, et les erreurs les plus courantes.
Les types de déclinaisons de logo
Les déclinaisons d'un logo se rangent sur deux axes : la forme, c'est-à-dire les éléments présents et leur disposition, et la version de couleur. Chaque forme existe dans chaque version de couleur, si bien que le nombre de fichiers grimpe vite.
| Déclinaison | Ce que c'est | Où elle sert |
|---|---|---|
| Logo principal | La composition complète, en général symbole et nom, telle que validée | Par défaut partout où il tient : en-tête de site, signalétique, papier à en-tête, packaging |
| Version horizontale | Le symbole à côté du nom, large et basse | En-têtes de site, signatures d'e-mail, bandeaux étroits |
| Version empilée | Le symbole au-dessus du nom, proche du carré | Publications sociales, faces de packaging, objets promotionnels, affiches |
| Symbole (logomark) | Le symbole seul | Avatars sociaux, icônes d'application, motifs, gaufrage, petits espaces |
| Logotype | Le nom dans son dessin de lettres, sans le symbole | Pieds de page, bandeaux de partenaires, stylos, petits objets |
| Submark | Un signe secondaire compact : initiales, monogramme ou badge | Autocollants, tampons, sceaux, détails de packaging |
| Favicon et icône d'application | Le symbole simplifié pour des tailles fixes en pixels, sur un carré | Onglets de navigateur, favoris, écrans d'accueil, magasins d'applications |
| Couleur | Le logo dans ses couleurs de marque | Fonds clairs, à l'écran et en impression quadri |
| Une couleur | Tout le logo dans une seule couleur de marque ou un ton direct | Sérigraphie, broderie, dorure à chaud, gravure |
| Noir | Le logo en noir plein | Impression noir et blanc, formulaires, factures |
| Blanc (négatif) | Le logo en blanc | Fonds sombres, photos, aplats de couleur de marque |
| Version petite taille | Une version simplifiée ou redessinée pour tenir en petit | Sous la taille minimale du logo principal, jusqu'au favicon |
Quand le logo principal associe un symbole et un nom, on parle souvent de logo combiné, et c'est en général soit la version horizontale, soit la version empilée.
Logo principal et logo secondaire
Le logo principal
Le logo principal est la version dans laquelle la marque a été validée, celle vers laquelle on doit se tourner en premier. La charte graphique doit le dire clairement : utilisez le logo principal chaque fois qu'il tient à sa taille minimale ou au-dessus, et passez à une autre déclinaison seulement quand ce n'est pas le cas. Cette seule règle élimine l'essentiel des hésitations.
Les versions secondaires
Un logo secondaire reprend le même symbole et le même nom, réagencés pour un espace d'une autre forme. Si le logo principal est horizontal, le secondaire est en général empilé, et inversement : horizontal pour les en-têtes et les signatures d'e-mail, empilé pour les publications sociales, les faces de boîte et les tote bags.
Une version secondaire n'est pas une refonte. Gardez le même symbole et le même lettrage ; seuls la disposition et l'écart changent, et cet écart se définit comme la zone de protection, en fraction du symbole. Si la version empilée demande un autre rapport entre symbole et nom, fixez-le une fois dans le fichier maître et ne la reconstruisez jamais à l'œil.
Symbole, logotype, submark et favicon
Symbole
Le symbole, ou logomark, représente la marque là où le nom ne tient pas ou figure déjà : un avatar de profil, une icône d'application, un motif, un gaufrage à sec. Un symbole neuf n'est pas toujours reconnaissable seul, alors précisez où il peut apparaître seul et où le nom doit rester à proximité.
Logotype
Le logotype est le nom dans son dessin de lettres, utilisé là où le symbole serait redondant ou trop petit pour se lire : pieds de page, bandeaux de partenaires, un stylo. Les identités sans symbole prennent en général une initiale ou un monogramme comme version compacte.
Submark
Le submark est un signe secondaire compact : des initiales, un monogramme, un badge circulaire construit à partir du nom. Il convient à l'hôtellerie, à la restauration, à la mode et aux petites marques de produits qui impriment autocollants, tampons et étiquettes. Si le client n'a pas d'usage pour lui, n'en inventez pas.
Favicon et icône d'application
Le favicon et les icônes d'application dérivent du symbole mais obéissent à des tailles fixes en pixels : 16, 32 et 48 px dans le favicon.ico, un favicon SVG, une icône tactile Apple de 180 px, et des icônes de 192 et 512 px pour le manifeste de web app. À 16 px, la plupart des symboles perdent leurs détails et demandent un dessin simplifié. Les icônes d'application sont des carrés pleins que la plateforme découpe selon sa propre forme : le symbole a besoin de marge et d'un fond opaque.
Versions couleur et petites tailles
Couleur, une couleur, noir et blanc
La version couleur est la version par défaut sur fond clair. La version une couleur sert aux procédés qui déposent une seule encre, comme la sérigraphie, la broderie, la dorure à chaud ou la gravure ; indiquez-la en ton direct si la marque en a un. Le noir couvre l'impression noir et blanc et tous les cas où la couleur n'est pas permise. Le blanc, aussi appelé version négative ou en réserve, sert sur les fonds sombres et les photos.
Les versions à plat comptent surtout pour les logos à dégradés ou à couleurs superposées : si vous ne les dessinez pas, un fournisseur le fera, mal, la première fois que le logo sera brodé.
Logo responsive et versions petite taille
Sous une certaine largeur, le logo complet ne se lit plus. Un système de logo responsive répond par étapes : le logo complet quand il y a la place, puis une version plus courte ou le logotype, puis le symbole, puis le favicon. Une version petite taille répond autrement : elle garde les mêmes éléments et les redessine avec des traits plus épais et des contreformes plus ouvertes. Dans les deux cas, écrivez les seuils de bascule, par exemple "sous 30 mm, utilisez le symbole", et fondez-les sur des tests plutôt que sur l'habitude ; taille minimale du logo explique comment les trouver.
Combien de déclinaisons de logo pour un client
La réponse dépend du nombre de personnes qui placeront le logo et du nombre de types d'espaces, pas de la taille du projet.
| Petit client | Client plus important | |
|---|---|---|
| Formes | Logo principal, symbole, logotype | Logo principal, versions horizontale et empilée, symbole, logotype, souvent un submark |
| Versions de couleur | Couleur, noir, blanc | Couleur, une couleur avec références en ton direct, noir, blanc |
| Petites tailles | Jeu de favicons tiré du symbole | Versions petite taille, une séquence responsive, favicons et icônes d'application |
| En plus | Rien | Logos de co-branding, logos de sous-marques, un logo animé |
Pour un café, un consultant ou une boutique indépendante, trois formes dans trois versions de couleur, soit neuf fichiers de base plus le jeu de favicons, couvrent les prochaines années. N'ajoutez une version secondaire que si le logo principal est franchement large ou haut et que le client a un usage précis pour l'autre forme, comme des publications sociales carrées pour un long logo horizontal.
Un client plus important, avec une équipe marketing, des agences et des fournisseurs, en demande davantage, parce que davantage de personnes placent le logo sans vous. Même alors, chaque déclinaison doit mériter une ligne dans la colonne "Où elle sert" du premier tableau ; si vous ne pouvez pas l'écrire, supprimez la déclinaison.
Nommer et documenter les déclinaisons dans la charte
Nommer
Choisissez un mot par déclinaison et employez-le partout : plans de travail, fichiers, dossiers et charte graphique. Si la charte dit "blanc", le fichier ne dit pas "négatif" et le dossier ne dit pas "réserve". Un motif fiable est marque, forme, couleur : acme-logomark-white.svg, acme-logo-stacked-black.pdf. Nommez les plans de travail de cette façon et les exports portent les bons noms.
Documenter
La charte a besoin d'une section consacrée aux déclinaisons du logo, qui montre chaque version seule avec son nom, son usage et sa taille minimale, suivie des versions de couleur sur les fonds prévus pour elles. Ajoutez un ordre de préférence, logo principal en tête, pour que le lecteur sache quoi essayer quand le premier choix ne tient pas. Donnez à chaque forme sa propre zone de protection, puisqu'une version empilée et un symbole n'ont pas les mêmes proportions ; la zone de protection du logo dans Illustrator explique comment la mesurer. Pour le reste du document, voir que mettre dans une charte graphique.
Les erreurs courantes avec les déclinaisons de logo
Trop de compositions
Six agencements d'un même logo font sérieux en présentation et produisent de l'incohérence à l'usage, parce que le client prend le fichier qui se trouve ouvert. Moins de déclinaisons, chacune avec un usage clair, sont appliquées avec plus de constance.
Une version empilée qui ne sert jamais
Les versions empilées sont souvent dessinées parce qu'un modèle de charte leur réserve une case. Si les supports du client sont un en-tête de site, des factures et une enseigne, la version empilée ne quittera jamais le dossier. Vérifiez où le logo apparaîtra avant d'ajouter une forme.
Une version blanche jamais testée sur fond sombre
Passer tous les aplats en blanc ne suffit pas à faire une version négative. Les formes qui étaient blanches dans la version couleur, une lettre évidée dans un cercle par exemple, deviennent une masse pleine si elles ne sont pas évidées en transparence. Les traits fins paraissent aussi plus fins en clair sur foncé. Posez la version blanche sur la couleur la plus sombre de la palette, sur du noir et sur une photo chargée avant de la livrer, et corrigez le dessin si elle ne tient pas.
Aucune règle sur la version à poser sur chaque couleur
Le logo couleur posé sur une couleur de marque de valeur moyenne manque souvent de contraste. Indiquez quelle version va sur chaque couleur de la palette, et montrez-le.
Questions
Quelles sont les principales déclinaisons d'un logo ?
Le logo principal, les versions secondaires (horizontale ou empilée), le symbole, le logotype, un éventuel submark et le favicon ou l'icône d'application. Chaque forme existe ensuite en couleur, en une couleur, en noir et en blanc, et la plupart des marques ont aussi besoin d'une règle pour les petites tailles.
Quelle différence entre logo principal et logo secondaire ?
Le logo principal est la version par défaut, utilisée chaque fois qu'elle tient. Le logo secondaire reprend le même symbole et le même nom, réagencés pour un autre espace, en général empilé quand le principal est horizontal, ou l'inverse. Ce n'est pas un autre dessin.
Combien de déclinaisons de logo faut-il prévoir ?
Un petit client a en général besoin de trois formes, le logo principal, le symbole et le logotype, chacune en couleur, en noir et en blanc, plus un jeu de favicons. Les structures plus importantes ajoutent des versions secondaires, des versions une couleur en ton direct, des versions petite taille et des logos de co-branding, chacun avec un usage déclaré.
Logo en négatif et logo blanc, est-ce la même chose ?
Dans la plupart des chartes, oui : la version négative est la version blanche utilisée sur fond sombre. Certaines marques ont aussi une version négative en couleur, où seuls les éléments foncés passent en blanc. Quel que soit le terme choisi, employez-le de façon constante.
Générer et documenter les déclinaisons avec Anchr Tools
Anchr Ship produit les versions de couleur des trois formes de base. Associez les plans de travail du logomark, du logotype et du logo complet, et il génère les variantes noir et blanc à plat comme nouveaux plans de travail, sans toucher aux originaux, puis exporte chaque plan de travail en SVG, PNG en 2x avec transparence, PDF et un PDF/X-1a en CMJN prêt pour l'impression. Les fichiers sont nommés en minuscules (logomark-black.svg) et rangés dans une arborescence numérotée par forme, support et couleur. Sur demande, il ajoute les favicons et les icônes d'application à partir du logomark, et des images pour les réseaux sociaux, dont une photo de profil de 400 x 400. Les versions secondaires, les submarks, les versions en ton direct et les versions petite taille redessinées restent à dessiner par vous ; Ship ne produit pas de fichiers Pantone.
Anchr Guide documente l'ensemble. Il lit le logomark, le logotype et le logo complet dans le fichier ouvert et remplit une charte graphique en PDF ; son modèle Folio de 12 pages comporte une page de déclinaisons du logo (logomark, logotype, noir, blanc), une page logo sur couleur, une page de zone de protection et une page de taille minimale avec la taille de chaque version en mm pour l'impression et en px pour l'écran. Anchr Portal publie ensuite les fichiers du logo pour fonds clairs et fonds sombres sur une page hébergée que le client ouvre avec un seul lien.
Pour obtenir rapidement un jeu de favicons et une photo de profil de 1000 px à partir d'un seul fichier, l'outil gratuit pour redimensionner un logo fonctionne dans le navigateur et n'envoie jamais le logo. Les deux forfaits incluent les cinq outils : Per brand à 49 USD par an avec un essai de 7 jours, Studio à 199 USD par an avec un essai de 14 jours ; voir les tarifs.