Le vent de fraicheur qui a soufflé sur notre site a également fait buller notre logo !
En fait, l’été dernier nous avons entrepris de préciser le ton avec lequel nous voulions nous adresser à vous, et il nous a semblé évident de mettre notre identité en chantier pour allier la forme au fond. On est designers tout de même !
Tout comme le site Internet et les supports de communication de l’agence en général, ce projet a été réalisé en interne.
On a collecté des centaines d'images, on a fait des milliers de dessins, testé un paquet de typo…
Concevoir un logo à l’heure du multi-écrans, ça demande de jouer avec certains paramètres si l’on veut en tirer le meilleur. Voilà ce que nous pouvons partager de notre expérience et quelques ressources qu’on utilise.
La typo
Une large partie de l’identité de marque repose sur le choix typographique, et justement le choix ne manque pas en la matière !
Il était pour nous déterminant de pouvoir être parfaitement lisibles et fidèles à notre intention esthétique, quel que soit le navigateur utilisé. Nous avons donc préféré le catalogue Google Fonts. Il y a quelques années, le choix et la qualité des polices ne rivalisaient pas avec les plateformes payantes comme Typekit par exemple. Aujourd’hui, on y trouve plus de 600 caractères libres de droits qu’il est aussi facile de télécharger pour travailler offline. Il existe aussi des comparatifs comme celui-ci qui vous aideront à trouver la solution qui vous convient le mieux.
Le logo User Studio utilise donc la Ubuntu, les textes et titrages sont respectivement en Open Sans et Montserrat.
Un logo sociable
L’expérience nous a montré que la forme générale du logo n’est pas à prendre à la légère… Le web d’aujourd’hui est éminemment social, et il devient donc fondamental de mettre un soin particulier à l’image de marque jusque sur ces platefromes. Vous aurez remarqué que les “Profile pictures” des services en ligne sont bien souvent inscrite dans un carré ou une forme de cercle. Notre nouveau logo a été conçu pour convenir aux différentes configurations d’usages : en carré, déployé en ligne, réduit à sa bulle.
Ce dernier est important car la plupart des services en ligne comme Pinterest par exemple compressent votre image pour alléger le temps de chargement de leurs pages. Et la lisibilité de petits caractères en prend souvent un coup ! On rencontre aussi ce même type de besoin sur les très petites tailles lorsqu’il s’agit de faire la favicon qui apparaît sur l’onglet de votre navigateur (Converticon est utile à cet égard).
"color:#ff0052"
C’est la couleur de User Studio. Celle-ci n’a pas bougé, elle fait partie de la famille : on l’appelle “$pink-user” dans notre feuille de style Sass ;)
La couleur est très importante pour l’identité. Voyez cette palette, vous n’aurez aucun mal à distinguer les différentes organisations derrière ces nuances de bleu.
Si vous avez besoin de vous en convaincre, jetez un œil au site Brandcolors.net
Là encore, les différentes plateformes qui utilisent votre identité interprètent plus ou moins élégamment vos belles intentions. Notre couleur est donc avant tout une couleur web (code hexadécimal) et dispose maintenant d’une gamme d’alternatives pour répondre aux cas particuliers (complémentaire, désaturé, filigrane, couleur foncée).
Picto font
Une autre micro-révolution qui facilite énormément l’intégration de notre logo est la création de notre propre picto font (ou Icon Font). Le logo que vous voyez en haut n’est pas un PNG ou un GIF avec un fond transparent, c’est un caractère typographique ! Aussi, quelle que soit la taille de l’écran, il apparaîtra toujours avec autant de précision, se redimensionnant proportionnellement.
Pour réaliser notre propre picto font — qui comporte notre logo mais aussi tous les pictogrammes de notre site — nous avons utilisé le service en ligne IcoMoon qui permet d’importer vos créations en SVG, de les calibrer et d’en exporter une police de caractère complète.
Le cinquième point ?… L'équipe ! Car cette cure de Jouvence a demandé un travail long et minutieux et a été rendu possible grâce au dialogue des talents de l’agence.
Merci à Camille et Laurie pour leur aide précieuse ;)