Un « f » blanc en minuscule dans un carré bleu (couleur hexadécimale #4c66a4) est le logo de Facebook. Les lettres connectées, blanches et arrondies « CNN » entourées d’un dégradé rouge qui va de la teinte hexadécimale #920000 à la teinte hexadécimale #D60000 est le logo de CNN. Les lettres WSJ écrites en police « Escrow » en noir sur fond blanc nous disent que nous voyons quelque chose à propos du Wall Street Journal. En l’absence de tout autre indice, ces logos, couleurs et polices nous signalent immédiatement que nous examinons du contenu ou une référence à une marque spécifique. La marque peut modifier la taille ou l’orientation de certains aspects de ses placements visuels en ligne, mais il est peu probable que nous voyions jamais l’une de ces trois marques représentées sans les reconnaître immédiatement.
Vous pouvez – et devriez – le faire également avec votre marque. C’est plus que votre logo qui doit figurer sur tous les endroits où vous vous représentez. Bien que vous puissiez commencer par votre site Web – l’endroit où vous passerez le plus de temps à réfléchir à votre identité visuelle, puisqu’il n’y a aucune autre marque en concurrence pour attirer les yeux de votre lecteur – il est important de réfléchir à la façon dont vous vous présenterez dans tous les autres endroits où votre marque apparaîtra. Aujourd’hui, je vais utiliser la marque Jebraweb pour illustrer comment les aspects de l’identité visuelle de votre marque peuvent être utilisés en ligne.
Votre logo
Sur le site actuel de Jebraweb, j’ai commencé par notre logo, qui est composé de deux myosotis de style pop-art, l’un en jaune et l’autre en bleu. Nous les utilisons différemment selon les exigences de la page de destination.
Couleur: Ces couleurs fonctionnent bien sur une grande variété de réseaux sociaux que nous utilisons. Par exemple, la fleur jaune se détache très bien du bleu de Facebook : 
La fleur bleue, en revanche, fait bonne figure sur Twitter :
#Domaine? #Hébergement? #CMS? Lequel est lequel, et qu’est-ce qui coûte quoi ? Un guide pratique de Jebraweb : http://t.co/dIpRUXPRaA
– Jebraweb (@jebraweb) 24 mars 2014
Taille: Les fleurs elles-mêmes sont carrées. Cela est extrêmement utile pour de nombreux endroits en ligne où le spot de placement du logo est optimisé pour une forme carrée. Pour nous, cela inclut
- Notre image de profil d’entreprise Facebook. Celui-ci doit être de 200 x 200 pixels, entouré d’une bordure de 12 x 12 pixels qui ne sera pas visible dans l’image finale.
- Notre favori. Il s’agit de la petite image qui s’affiche en haut de la fenêtre de votre navigateur à côté du nom de votre site Web. Cela devrait être 16×16 pixels.
- Notre Profil Twitter image. C’est 81×81 pixels.
Il existe d’autres réseaux sociaux qui nécessitent des formes carrées pour leur image de marque. Bien que nous n’utilisions pas (encore !) ces réseaux pour notre entreprise, ils sont :
- L’icône de la chaîne YouTube, qui doit mesurer 90 x 90 pixels.
- L’image du profil Google+, qui doit mesurer 250 x 250 pixels.
- L’image de profil Pinterest, qui doit mesurer 165 x 165 pixels.
- L’image du profil Instagram, qui doit mesurer 110 x 110 pixels.
Bien sûr, ces dimensions peuvent changer à tout moment, mais si vous commencez avec une version carrée de votre logo plus grande que n’importe laquelle de ces options, il sera facile de le réduire à l’une de ces dimensions plus tard.
Votre image de fond
L’arrière-plan du site Web de Jebraweb est un grain de bois distinctif. Nous l’utilisons dans autant d’endroits que possible, et vous pouvez également le faire si vous choisissez un arrière-plan personnalisé pour votre site. Si votre arrière-plan est de couleur unie, cela tient toujours – vous aurez juste besoin de créer un fichier image de votre couleur qui peut servir d’arrière-plan à n’importe quel réseau social qui vous permet de télécharger une image d’arrière-plan. Nous utilisons notre grain de bois à deux endroits en dehors de notre site Web :
- Notre image de couverture Facebook, qui devrait faire 851×315 pixels.
- Notre image de fond Twitter, avec des dimensions qui peuvent être délicates. La plupart des utilisateurs voient environ 78 pixels de votre image d’arrière-plan, donc tout ce que vous utilisez doit être très flexible. Alors que de nombreux utilisateurs de Twitter créent un arrière-plan de type publicitaire pour leurs pages, nous en préférons un qui affiche subtilement la marque à travers la couleur, le motif ou la texture – et non à travers tout ce qui doit avoir une taille spécifique. Notre grain de bois est parfait pour nous ici.
- Beaucoup de nos infographies présentent cela comme arrière-plan. C’est juste une autre belle opportunité de renforcer notre appropriation, car les infographies sont souvent largement partagées et sans tous les supports originaux pour leur donner un contexte.
Votre police
Nous utilisons une police appelée Questrial dans notre logo et dans autant de nos infographies que possible. Il s’agit d’une opportunité de marque plus subtile, mais comme notre police est moins souvent utilisée en ligne, cela fait une différence. Il est probable que très peu de gens pourraient mettre le doigt dessus, mais ils remarqueront que les choses sont cohérentes sans pouvoir identifier Pourquoi. C’est également le cas du Wall Street Journal – un WSJ dans n’importe quelle autre police peut ne pas rafraîchir la mémoire du lecteur, mais dans sa police personnalisée, il le fera. Voici quelques endroits où nous avons utilisé notre police — souvent en conjonction avec les couleurs de notre marque :
Il est logique de définir vos couleurs, votre logo et vos polices avant de commencer à développer les images qui vous suivront sur le Web. Cela garantit que les gens commenceront à vous identifier avec votre image, et s’ils vous aiment, leur subconscient choisira votre image de marque dans la mer de logos et d’images. Un bon graphiste planifiera cela avec vous dès le début – alors assurez-vous de demander comment votre graphiste prévoit de gérer tous les endroits où vous aimeriez avoir une présence.
Vous avez des questions sur la façon de planifier votre identité visuelle ?
