Le magazine du webdesign dans le Nord : création de site à Douai, webdesigner et tarifs, …

identite-visuelle

Création d'identité visuelle : logo, couleurs, déclinaisons

9 min de lecture
Création d'identité visuelle : logo, couleurs, déclinaisons

Une création d’identité visuelle réunit un signe, une palette de couleurs, une ou deux familles typographiques et un répertoire de formes, puis règle leur emploi sur chaque support. Le travail commence par un positionnement écrit, jamais par un dessin. Voici les décisions à trancher, dans l’ordre où elles se présentent, et les livrables qui en découlent.

De quoi une identité visuelle est faite et à quoi elle sert

Une identité visuelle n’est pas un logo entouré de deux couleurs. C’est un système de signes assemblé à partir de cinq pièces : le signe principal et ses variantes, une palette, une ou deux familles typographiques, un répertoire de formes et de matières, un traitement des images. Chaque pièce se décide une fois, puis se réemploie partout.

Trois termes se confondent dans les devis. L’identité visuelle désigne ce système. La charte graphique est le document qui en fixe les règles d’emploi : son contenu, sa fabrication et ses prix constatés sont détaillés dans le guide pour créer une charte graphique. L’image de marque, elle, est ce que la clientèle retient, et échappe en partie au graphiste.

À quoi sert ce système ? D’abord à être reconnu avant d’être lu : une couleur et une forme se perçoivent à distance, un nom se déchiffre de près. Ensuite à tenir ensemble des supports fabriqués par des personnes différentes, à des moments différents. Enfin à réduire le nombre de décisions, puisque la couleur d’un bouton ne se rediscute plus une fois la palette arrêtée.

L’examen d’une identité existante tient en trois tests, utiles avant toute refonte. Masquer le nom sur un support et vérifier que l’entreprise reste identifiable. Réduire le signe à la taille d’un ongle pour voir ce qui survit. Aligner un devis, une publication et l’enseigne, puis regarder s’ils sortent de la même maison. Un écart sur ce dernier test annonce un chantier de déclinaisons, pas forcément un nouveau logo.

Avant de dessiner : positionnement, brief créatif et planche d’inspiration

Carnet de croquis ouvert sur des formes géométriques tracées au crayon et échantillons de tissus unis

Un dessin ne répare pas un positionnement flou. La première page à écrire tient en cinq lignes : l’activité réelle, la clientèle visée, la promesse que l’entreprise tient mieux que ses voisins, les deux ou trois concurrents dont il faut se distinguer, le registre souhaité. Cette page arbitre ensuite les discussions du projet.

Vient le brief créatif, document court remis au graphiste. Six informations le rendent exploitable :

  • les supports réellement utilisés aujourd’hui, avec leurs formats et leurs contraintes de fabrication ;
  • les éléments à conserver, un nom, une couleur historique, une forme déjà connue ;
  • deux ou trois identités admirées hors du secteur, avec la raison précise de ce choix ;
  • les identités du secteur jugées banales, pour cadrer l’écart à produire ;
  • la personne qui décide, une seule, et celles qui donnent un avis consultatif ;
  • les échéances qui imposent une date, salon, impression, ouverture d’un local.

La planche d’inspiration traduit ces mots en images. Elle rassemble des matières, des photographies, des gammes colorées, des caractères, et laisse de côté les logos des concurrents : collectionner les signes du secteur produit une copie polie. Deux planches contrastées valent mieux qu’une seule, parce qu’elles obligent à un choix argumenté plutôt qu’à un hochement de tête.

Cette étape se valide par écrit avant le premier tracé. Le procédé rappelle le zoning d’un projet web, décrit dans les étapes d’une maquette de site : fixer l’intention avant la forme finale épargne les allers-retours sur un détail.

Le logo : versions, lisibilité et fichiers à récupérer

Quatre familles de signes couvrent presque tous les cas. Le logotype travaille le nom lui-même, dessiné ou composé dans un caractère retenu pour l’occasion. Le monogramme le réduit à une ou deux lettres. Le symbole associé au nom ajoute une forme autonome, utilisable seule une fois la notoriété installée. L’emblème enferme le tout dans un cadre, écusson ou cercle, lisible sur un véhicule et délicat en très petit format.

Une identité livrée comprend plusieurs versions du même signe, pas un fichier unique :

  • la version principale, pour les supports où la place ne manque pas ;
  • une version horizontale pour les en-têtes de page et les bandeaux étroits ;
  • une version compacte ou carrée pour les avatars et les petits emplacements ;
  • une version monochrome, noir sur blanc, pour la gravure, la broderie et le marquage ;
  • une version en réserve, blanche, sur fond sombre ou sur photographie ;
  • une déclinaison aux dimensions d’un favicon.

Trois tests suffisent à juger la lisibilité. Le premier réduit le signe à seize pixels de hauteur : les détails fins disparaissent, les contre-formes se bouchent. Le deuxième l’imprime en noir, sans dégradé, et un signe qui repose sur un effet de couleur perd alors sa force. Le troisième l’observe à trois mètres, comme une enseigne vue du trottoir d’en face.

Les fichiers à réclamer suivent deux logiques, le vectoriel et le pixel. Le format vectoriel décrit des tracés redimensionnables à l’infini : le SVG, recommandation du W3C publiée en version 1.1 deuxième édition le 16 août 2011, décrit des graphiques en deux dimensions en XML. Un imprimeur réclamera plutôt un PDF ou un EPS issu du même tracé. Le PNG à fond transparent couvre l’écran, le JPEG restant réservé aux photographies.

Le favicon mérite son propre export. Google Search Central demande une image carrée d’au moins huit pixels de côté et recommande de dépasser quarante-huit pixels. Les formats courants sont acceptés, dont ICO, PNG et JPEG, à raison d’un seul favicon par nom d’hôte, avec une adresse stable et une image représentative de la marque. L’affichage, lui, n’est jamais garanti, et un monogramme s’y comporte mieux qu’un logotype complet.

Couleurs et typographies : choisir peu, choisir pour durer

Trois pots de peinture ouverts de couleurs unies alignés sur une table en bois

Une palette de couleurs exploitable reste courte : une dominante, une secondaire, deux neutres, une teinte de signalement pour les alertes d’interface. Au-delà, chaque nouveau support invente sa règle. La dominante se choisit en regardant les concurrents directs, puisque dans un secteur entièrement bleu, le bleu coûte de la visibilité.

Le contraste relève de la mesure, pas de la préférence. Le W3C fixe dans les WCAG 2.2 un rapport minimal de 4,5 pour 1 entre un texte courant et son fond, ramené à 3 pour 1 pour les grandes tailles, définies comme dix-huit points, ou quatorze points en gras. Le même référentiel demande 3 pour 1 pour les composants d’interface et les parties de graphiques nécessaires à la compréhension, et exempte les logos, au motif qu’ils obéissent à des règles de marque. Un jaune pâle reste donc possible dans un signe, inutilisable pour le texte d’une page.

Trois vérifications protègent une palette. L’appliquer sur une photographie réelle de l’atelier ou du produit. La regarder en extérieur, sur un téléphone. Contrôler qu’aucune information ne repose sur la seule couleur, une étiquette devant rester lisible pour une personne qui distingue mal le rouge du vert.

Deux familles typographiques suffisent, une pour les titres, une pour le texte courant, parfois une seule déclinée en plusieurs graisses. La hiérarchie typographique compte davantage que le dessin des lettres : tailles, graisses et interlignes se fixent une fois pour toutes. Un caractère se teste sur le nom de l’entreprise en petit corps, sur les chiffres d’un devis et sur les accents.

Les licences de polices se lisent avant l’achat. Une licence couvre un usage précis, bureautique, impression, intégration sur un site, application, et son périmètre se compte parfois en nombre de postes ou de pages vues. Un caractère sous licence libre épargne cette négociation. Prévoir un repli disponible sur tous les postes garde les documents internes cohérents.

Durer suppose enfin d’éviter ce qui date, les effets liés aux réglages par défaut d’un logiciel et les dégradés à la mode : une forme franche, une palette tenue et un caractère solide traversent une décennie.

Décliner sur le site, les réseaux et l’imprimé : ce qui ne bouge pas

Mains comparant deux échantillons de papier de couleurs unies devant des chemises cartonnées

Une identité visuelle se dilue support par support, sans décision brutale. Quatre éléments ne bougent jamais : le signe et ses proportions, la palette et le rôle de chaque teinte, la hiérarchie typographique, la zone de respiration autour du logo. Trois éléments s’adaptent : le format, la densité d’information, le recadrage des images.

Sur le site, le signe vit au moins en trois endroits, l’en-tête, le pied de page et l’onglet du navigateur. Google documente une donnée structurée d’organisation qui désigne le fichier faisant office de logo : l’image doit mesurer au minimum 112 pixels de côté, son adresse rester explorable et indexable, son format être pris en charge par Google Images. Cette déclaration aide le moteur à comprendre quel logo afficher dans ses résultats et son panneau de connaissance, sans garantie d’affichage. Le nom fait partie du même décor, et l’accord entre l’enseigne, la marque et l’adresse du site se prépare au moment de choisir un nom de domaine.

Sur les réseaux sociaux, l’avatar carré se retrouve rogné en cercle par plusieurs plateformes : un logotype complet y perd ses extrémités, un monogramme survit. Les gabarits de publication se préparent en amont, un format carré, un format vertical, une bannière. Une identité qui ignore ces cadres finit recadrée par la personne la plus pressée.

L’imprimé impose ses propres limites. Le fabricant d’enseigne demande un tracé vectoriel et une taille minimale, le brodeur réduit le nombre de couleurs, le marquage de véhicule travaille sur une surface courbe. Fournir à chaque prestataire la version monochrome et le fichier vectoriel évite les recréations approximatives.

Confier la création d’identité visuelle : livrables et droits d’usage

Trois voies existent : le graphiste indépendant, le studio qui traite l’identité et le site ensemble, le modèle vendu en ligne puis personnalisé. Les deux premières s’évaluent sur des travaux comparables, d’après la grille de lecture d’un portfolio de webdesigner, et les ordres de grandeur de rémunération se lisent dans le panorama des tarifs d’un webdesigner. La troisième voie dépanne un lancement, à condition d’accepter qu’un même tracé circule ailleurs.

La liste des livrables se négocie au devis, jamais à la livraison :

  • les fichiers vectoriels sources du signe, et les exports courants pour l’écran et l’impression ;
  • toutes les versions dessinées, principale, horizontale, compacte, monochrome, réserve, favicon ;
  • la palette avec ses références pour l’écran et l’impression, le rôle de chaque teinte précisé ;
  • les fichiers des polices retenues, accompagnés du justificatif de licence par usage ;
  • les gabarits réellement utilisés, document texte, devis, publication, signature de courriel ;
  • un document d’usage, même court, qui fixe les tailles minimales et les fonds autorisés.

Les droits d’usage se règlent au même moment, avant le premier virement. Payer une création ne transfère pas automatiquement les droits attachés au dessin : une cession écrite précise les supports concernés, l’étendue géographique et la durée. Les polices et les photographies, elles, conservent leurs propres licences. Le guide de la charte graphique de cette rubrique détaille ces clauses et les précautions de dépôt.

Prochaine étape concrète : réunir dans un dossier les trois supports les plus vus par la clientèle, les photographier tels quels, puis écrire la page de positionnement et le brief créatif. Deux heures y suffisent, et ce dossier change la première réunion avec un graphiste, la discussion portant sur des décisions plutôt que sur des goûts.