La refonte vectorielle du logo Gisors Optique [Design]

Dans le cadre du projet de modernisation du site ‘La Centrale d’Optique’ de Gisors, la refonte du logo de l’enseigne s’avérait nécessaire. En effet, l’ancien logo possédait quelques défauts comme la pixelisation, une marge excessives, un slogan intégré devenant illisble aux petites tailles, et surtout un format non vectoriel, le rendant non redimensionnable.

« Le logo, un élément déterminant de la perception de l’univers graphique de la marque »

Les points d’amélioration identifiés

L’ancienne version, matricielle, non agrandissable

• Pixelisation – Le logo d’origine était au format jpg, qui ne ne permet pas un agrandissement ou une réduction de taille, tout en conservant une bonne qualité. Aujourd’hui, le format vectoriel SVG permet un redimensionnement à n’importe quelle taille, sans perte de qualité. Le logo d’origine présentait de plus une pixelisation des lettres, même à sa taille naturelle, dégradant la perception de qualité du site, d’autant plus qu’il est présent dans l’en-tête de chaque page.

• Marge interne – Egalement, une marge interne très large ne permettait pas de le placer correctement avec d’autres éléments sur le site.

• Slogan – Enfin, le slogan était intégré au logo lui-même (‘Centrée sur les prix’). Or ce texte ne se lit plus correctement sur des petites tailles. Etant intégré dans l’image, il n’est pas reconnu par Google pour le référencement naturel du site. Il a donc été retiré, pour être intégré dans le contenu texte du site lui-même, sous forme de ‘tagline’ standard, bien mise en évidence sur chaque page, et référençable par Google.

• Style – L’apparence globale a été respectée, afin de ne pas perturber les utilisateurs avec un changement trop brutal, qui les questionnerait sur le fait de bien être à la bonne adresse, qu’il connaissent déjà. 😉

• Police : La police d’écriture n’était pas fournie. Après recherches, la police a été retrouvée et intégrée, en respectant la typographie d’origine (espacements, etc.)

Une version applicable sur fond noir a été également développée. Elle sert notamment pour le bas de page du site (footer), qui est sur fond bleu.

Les actions effectuées

La nouvelle version, vectorielle, et redimensionnable

 

• re-création du logo en format vectoriel (svg), sans pixelisation, et redimensionnable sans perte de qualité
• retrait de la marge interne
• retrait du slogan texte et inclusion dans le site web
• amélioration du dessin du logo (le cercle coupé et le rond interne)
• recherche de la police de caractères d’origine et ré-écriture sans pixelisation

Transition douce : La refonte du logo ne change pas fondamentalement son design, juste sa qualité. Dans ce scénario, les utilisateurs qui sont habitués à cette référence visuelle ne sont pas perdus, et continuent d’identifier précisémment la marque associée. Si le logo devait radicalement changer d’apparence, il serait judicieux de procéder par étapes dans le temps pour ‘habituer’ les utilisateurs à l’évolution progressive jusqu’à la version finale.

La version ‘inverse’, pour les fonds foncés

 

 

La qualité du logo participe de manière essentielle dans le ressenti général de la qualité d’un site.

Le nouveau logo a été intégré au site web. Du fait de son aspect vectoriel, il peut être redimensionné à volonté sans perte de qualité directement par le navigateur. Cela permet d’éviter d’avoir à créer des exports d’images à chaque taille souhaitée comme on le faisait avant le support des images vectorielles. Pour illustrer les exemples de tailles d’affichage, le logo a été dimensionné différemment dans l’en-tête du site, son pied de page et la page Contact.

Voir aussi : La révolution vectorielle pour les images des sites web