Template de brand center : pages, contenu et structure
Cette page est un template de contenu pour un brand center, aussi appelé brand hub ou site de charte graphique : l’endroit où les collaborateurs, les agences, les partenaires et la presse trouvent les règles de votre marque et les fichiers validés. Remplissez les cellules ci-dessous : vos réponses sont enregistrées dans ce navigateur et les tableaux s’exportent en CSV. Vous obtenez le plan de contenu pour construire le site avec l’outil de votre choix. La dernière section compare les types d’outils qui permettent de le construire.
Le template couvre ce qui figure sur chaque page. Pour comprendre la logique de la page d’accueil, des niveaux d’accès et de la navigation, lisez comment concevoir un brand center. Pour la fréquence de chaque page sur 788 brand centers publiés, consultez les exemples de brand centers en chiffres.
1. Décisions à prendre d’abord
| Décision | Votre réponse |
|---|---|
| Quels sont les deux ou trois publics principaux (collaborateurs, agences, partenaires, presse) ? | |
| Que demande le plus souvent chaque public à l’équipe de marque aujourd’hui ? | |
| Quels contenus sont ouverts à tous, lesquels demandent un lien ou un mot de passe, et lesquels demandent un compte ? | |
| Qui est le responsable du brand center (une seule personne, nommée) ? | |
| Quelles langues faut-il au lancement ? | |
| Où sont les fichiers : dans l’outil du brand center lui-même, ou dans une photothèque dont il lit le contenu ? | |
| Quelle adresse aura-t-il (par exemple brand.votreentreprise.com) ? |
La réponse sur l’emplacement des fichiers détermine la maintenance dont le site a besoin. Si les fichiers sont importés à la main dans le brand center, quelqu’un doit refaire l’import chaque fois qu’un fichier change.
2. Plan du site
Une structure qui convient à la plupart des organisations. Retirez les pages pour lesquelles vous n’avez pas de contenu ; ne publiez pas de pages vides.
| Page | Objectif | Public | Accès |
|---|---|---|---|
| Accueil | Dit ce qu’est le site et oriente chaque public vers son contenu | Tous | Ouvert |
| Histoire de la marque | Raison d’être, positionnement, valeurs, sur un seul écran | Collaborateurs, agences | Ouvert |
| Logo | Variantes, fichiers, taille minimale, zone de protection, mauvais usages | Tous | Ouvert |
| Couleurs | Palette avec valeurs et usages | Designers, agences | Ouvert |
| Typographie | Polices, graisses, hiérarchie, fichiers de polices | Designers, agences | Ouvert, fichiers de polices restreints si la licence l’exige |
| Images | Style de photographie et d’illustration, avec des exemples validés | Designers, agences | Ouvert |
| Voix et ton | Comment la marque écrit, avec des exemples | Rédacteurs, agences, collaborateurs | Ouvert |
| Applications | Les règles appliquées : papeterie, présentations, réseaux sociaux, signalétique, packaging | Designers, agences | Ouvert |
| Templates | Fichiers modifiables qui servent de point de départ aux équipes | Collaborateurs, partenaires | Restreint |
| Photothèque | Images produits, supports de campagne, vidéos, par collection | Collaborateurs, partenaires, presse | Mixte, selon la collection |
| Campagnes | Kits des campagnes en cours | Collaborateurs, partenaires | Restreint jusqu’au lancement |
| Dossier de presse | Logos, portraits des dirigeants, texte de présentation, contact presse | Presse | Ouvert |
| Nouveautés | Les derniers ajouts et changements, avec leurs dates | Tous | Ouvert |
| Contact | Qui contacter, et pour quoi | Tous | Ouvert |
3. Page d’accueil
| Zone | Contenu | Votre version |
|---|---|---|
| En-tête | Votre logotype, le libellé « Brand Center », la recherche, la connexion | |
| Bandeau principal | Une phrase qui dit ce que le site propose, une image, un lien vers la photothèque | |
| Collections | Quatre à six cartes nommées d’après ce que les visiteurs viennent faire | |
| Accès rapide | Liens permanents : logos, charte graphique, couleurs, typographie, templates | |
| Nouveautés | Les trois ajouts les plus récents, avec leurs dates | |
| Pied de page | Contact de la marque, conditions d’utilisation des médias |
4. Page Logo
| Variante | À utiliser pour | Fichiers à fournir | Taille minimale | Zone de protection |
|---|---|---|---|---|
| Logo principal, couleur | Par défaut sur fond clair | SVG, PNG, PDF ou EPS | ||
| Logo principal, inversé | Fonds sombres ou photographiques | SVG, PNG, PDF ou EPS | ||
| Logo monochrome | Impression en une couleur, gravure, broderie | SVG, PDF ou EPS | ||
| Version empilée ou compacte | Espaces étroits | SVG, PNG | ||
| Symbole ou icône seul | Icônes d’application, avatars de réseaux sociaux, favicons | SVG, PNG en tailles fixes | ||
| Bloc de co-branding | Usage par les partenaires et les sponsors | SVG, PDF ou EPS |
Listez ensuite les mauvais usages, chacun avec une image :
| À ne pas faire | Pourquoi |
|---|---|
| Étirer, faire pivoter ou incliner le logo | |
| Changer ses couleurs | |
| Le placer sur un fond trop peu contrasté | |
| Ajouter des effets comme des ombres ou des contours | |
| Le reconstruire avec une autre police | |
| Utiliser une version retirée (montrez laquelle, et ce qui l’a remplacée) |
5. Page Couleurs
| Nom de la couleur | Rôle | HEX | RVB | CMJN | Pantone | Usage |
|---|---|---|---|---|---|---|
| Principale | ||||||
| Secondaire | ||||||
| Accent | ||||||
| Neutre, foncée | Texte | |||||
| Neutre, claire | Fonds | |||||
| Statut : succès, avertissement, erreur | Interface uniquement |
Ajoutez un tableau pour les associations accessibles, car une palette ne dit pas à un designer quelle couleur de texte est lisible sur quel fond :
| Couleur du texte | Couleur du fond | Rapport de contraste | Conforme WCAG AA pour le texte courant (4,5:1) |
|---|---|---|---|
6. Page Typographie
| Rôle | Police | Graisse | Taille et interligne | Police de remplacement | Licence et où l’obtenir |
|---|---|---|---|---|---|
| Titres | |||||
| Texte courant | |||||
| Légendes et libellés | |||||
| Chiffres et données | |||||
| Documents bureautiques et emails |
Indiquez la police de remplacement pour les personnes qui ne peuvent pas installer la police de la marque. Sans elle, les présentations et les documents s’affichent avec la police par défaut du logiciel.
7. Page Images
| Sujet | Règle | Exemple validé | Exemple à éviter |
|---|---|---|---|
| Sujets représentés | |||
| Lumière et couleur | |||
| Composition et cadrage | |||
| Personnes : qui est montré, et comment | |||
| Photographie de produit | |||
| Illustration et icônes | |||
| Images de banque d’images et générées par IA : autorisées ou non, et à quelles conditions |
8. Page Voix et ton
| Principe | Ce que cela signifie | Écrivez ceci | Pas cela |
|---|---|---|---|
Ajoutez les éléments fixes que les rédacteurs demandent : le texte de présentation de l’entreprise en 25, 50 et 100 mots, l’orthographe des noms de produits, les règles de majuscules, et les mots que la marque n’emploie pas.
9. Applications et templates
| Application | Règles à montrer | Fichier de template à fournir | Responsable |
|---|---|---|---|
| Présentations | Masques de diapositives, mises en page de titre et de contenu | PowerPoint, Keynote ou Google Slides | |
| Documents et courriers | Papier à en-tête, mise en page des rapports | Word ou Google Docs | |
| Signature d’email | Mise en page, taille du logo, mention légale | HTML ou texte | |
| Réseaux sociaux | Images de profil, formats de publication par réseau | Template modifiable par format | |
| Publicité | Mises en page par format, position du logo | Template modifiable | |
| Signalétique et PLV | Tailles, matériaux, emplacement | PDF prêt à imprimer | |
| Packaging | Gabarits de découpe, éléments obligatoires | Fichier de gabarit | |
| Vidéo | Intro et outro, bandeaux de titre, placement du logo | Fichier de projet ou template d’animation |
10. Collections de médias
| Collection | Contenu | Public | Accès | Responsable | Date de revue |
|---|---|---|---|---|---|
| Logos et signes | Chaque variante validée, en ZIP et à l’unité | Tous | Ouvert | ||
| Images produits | Packshots et images d’ambiance par gamme | Collaborateurs, partenaires, presse | Ouvert ou par lien | ||
| Kits de campagne | Visuels clés, templates, déclinaisons par campagne | Collaborateurs, partenaires | Restreint jusqu’au lancement | ||
| Personnes et lieux | Portraits des dirigeants, bureaux, événements | Collaborateurs, presse | Ouvert ou par lien | ||
| Vidéo | Films de marque, films produits, déclinaisons | Collaborateurs, partenaires | Selon le film | ||
| Campagnes précédentes, toujours validées | Supports qui peuvent encore être utilisés | Collaborateurs, partenaires | Restreint |
Chaque média d’une collection a besoin d’un statut, de droits d’usage et, le cas échéant, d’une date d’expiration. Sans ces champs, le site ne peut pas cesser d’afficher un fichier qui n’est plus validé.
11. Responsabilités et entretien
| Tâche | Responsable | Fréquence |
|---|---|---|
| Relire la page d’accueil et les nouveautés | Mensuelle | |
| Retirer les logos obsolètes, les images expirées et les campagnes terminées | Mensuelle | |
| Examiner les recherches sans résultat | Mensuelle | |
| Vérifier que chaque lien de téléchargement fonctionne | Trimestrielle | |
| Comparer la charte graphique aux pratiques actuelles | Annuelle | |
| Revoir qui a un compte | Tous les six mois |
Outils pour créer un brand center
Le template fonctionne avec chacun d’eux. Ils diffèrent par l’endroit où se trouvent les fichiers et par les personnes qui peuvent maintenir le site.
| Type d’outil | Comment le brand center est construit | Fichiers | Convient à |
|---|---|---|---|
| Plateforme de charte graphique | Pages de charte rédigées dans un éditeur conçu pour la documentation de marque et de design | Importés dans la plateforme, ou liés depuis un outil de design | Les équipes dont le besoin principal est de documenter les règles pour les designers |
| Système de digital asset management avec portail de marque | Pages de portail construites au-dessus de la photothèque | Servis depuis la photothèque, avec versions, droits et expiration | Les équipes dont le besoin principal est de distribuer des fichiers validés à beaucoup de monde |
| Outil de création de site généraliste ou wiki | Pages construites à la main à partir de blocs génériques | Importés en pièces jointes ou intégrés depuis un autre outil | Les petites marques avec peu de fichiers et un responsable à l’aise avec le web |
| Charte en PDF sur un drive partagé | Un seul document exporté | En vrac dans des dossiers | Un point de départ, mais sans recherche, et les anciennes copies restent en circulation |
Les questions qui départagent les options :
- Quand un fichier de logo est remplacé, le site affiche-t-il le nouveau sans que personne ne modifie une page ?
- Un média peut-il être masqué automatiquement à sa date d’expiration ?
- Un visiteur sans compte peut-il télécharger le logo ?
- Pouvez-vous voir ce qui a été téléchargé et ce que les personnes ont recherché ?
- Une personne extérieure à l’équipe de design peut-elle mettre à jour une page ?
Si la distribution compte plus que la documentation, la checklist des logiciels de portail de marque contient la liste complète des exigences à tester.
Comment cela se traduit dans Freedam
Nous éditons Freedam, un système de digital asset management avec un portail de marque : il correspond donc à la deuxième ligne du tableau. Voici ce qu’il couvre de ce template :
- Pages Logo, Couleurs et Typographie. L’Identité de marque contient les variantes de logo avec leurs tailles minimales et des schémas de zone de protection, des nuanciers avec les valeurs HEX, RVB, CMJN et Pantone qui se copient en un clic, des spécimens de polices avec téléchargement des fichiers, des exemples de bons et de mauvais usages, et un téléchargement du brand kit en fichier ZIP.
- Autres pages. Les pages personnalisées sont construites à partir de blocs, regroupées dans des Portails avec leur propre adresse, leur langue par défaut et leur thème, et suivent un workflow brouillon, relecture, publié.
- Collections de médias. Les collections lisent le contenu de la photothèque : un fichier remplacé ou expiré change sur le site sans modifier une page.
- Accès ouvert. Le portail public permet aux visiteurs sans compte de parcourir, rechercher et télécharger ce que les règles d’accès autorisent.
Deux outils gratuits ne demandent pas de compte : le Brand Center Generator produit un aperçu de page d’accueil à partir de votre site web, et la galerie de brand centers présente des exemples concrets par secteur. La démo est une vraie photothèque avec une Identité de marque que vous pouvez ouvrir, et créer un brand center liste les façons d’en démarrer un sur Freedam.