Combien de fois avez-vous cherché le logo d'une marque sur son site web, naviguant entre les pages "Presse" ou "Brand guidelines" ? Sans parler de la recherche infructueuse sur Google Images. Cette friction, bien que minime, représente un frein à la diffusion naturelle de votre identité visuelle. En 2025, alors que l'expérience utilisateur dicte nos choix techniques, il est temps de repenser l'accès aux ressources de marque.
C'est exactement ce qu'a réussi Livestorm.co avec son implémentation discrète mais efficace : un simple clic droit sur leur logo dévoile une popup proposant de télécharger l'icône (PNG/SVG), le logo complet (PNG/SVG) ou d'accéder aux guidelines de marque. Une solution élégante qui transforme une interaction habituelle en opportunité de branding.
Fort de ce constat, nous avons développé un module JavaScript léger qui reproduit et enrichit cette fonctionnalité. L'objectif est de proposer une solution plug-and-play, facilement et rapidement intégrable, sur n'importe quel projet web.
Le module fonctionne par simple ajout d'attributs HTML sur le lien de votre logo :
<a logo-branding lb-icon-svg="<url-icon.svg>" lb-icon-png="<url-icon.png>" lb-logo-svg="<url-logo.svg>"
lb-logo-png="<url-logo.png>" lb-guidelines="<url-guidelines>" href="<url-accueil>">
<img src="logo.png" alt="Logo">
</a>Cette approche déclarative présente plusieurs avantages techniques :
Zéro configuration : aucun JavaScript à écrire côté utilisateur
Surcharge de style : simplicité de personnalisation via CSS custom
Lien indépendant : le lien reste fonctionnel même si le script ne se charge pas
Compatibilité universelle : fonctionne avec tous les frameworks (React, Vue, Angular) et CMS (WordPress, Drupal, Webflow)
Le module se compose de deux fichiers principaux :
JavaScript : gestion des événements, création dynamique de la popup, téléchargement des assets
CSS : styles de la popup avec animations fluides et responsive design
Le module sera publié sur le registry npm sous le nom "@digital-garden-nantes/logo-branding", permettant une intégration native dans les projets JavaScript modernes :
npm install @digital-garden-nantes/logo-brandingimport '@digital-garden-nantes/logo-branding/dist/logo-branding.min.js';
import '@digital-garden-nantes/logo-branding/dist/logo-branding.min.css';Pour démocratiser l'usage, une version CDN sera également disponible :
Dans le head :
<link rel="stylesheet" href="https://cdn-01.digitalgarden.fr/logo-branding/logo-branding@latest/dist/logo-branding.min.css"Juste avant la fermeture de la balise body :
<script src="https://cdn-01.digitalgarden.fr/logo-branding/logo-branding@latest/dist/logo-branding.min.js"></script>Cette double approche répond aux besoins de tous les développeurs : intégration fine pour les applications complexes, plug-and-play pour les sites statiques ou les prototypes.
L'implémentation du module n'empêche en rien l'ajout d'un système de tracking permettant de mesurer :
Taux d'interaction avec le logo (clic droit vs clic standard)
Assets les plus téléchargés (PNG vs SVG, icône vs logo complet)
Provenance du trafic vers les guidelines de marque
Ces données révèlent des insights précieux sur la façon dont votre audience consomme votre identité visuelle.
Dans un écosystème digital où chaque micro-interaction compte, faciliter l'accès aux ressources de marque devient un avantage concurrentiel. Ce module illustre parfaitement l'approche de Digital Garden : partir d'un besoin concret, développer une solution technique robuste et la rendre compatible avec le plus grand nombre.
L'innovation ne réside pas toujours dans la complexité technologique, mais souvent dans la capacité à simplifier l'existant. C'est là dessus que l'expertise de nos UX designer est un vrai plus. En transformant un clic droit en portail d'accès à votre identité visuelle, ce module contribue à fluidifier la relation entre marques et utilisateurs.
Envie de tester le module ?
- Rendez-vous sur npm -> https://www.npmjs.com/package/@digital-garden-nantes/logo-branding
- Directement depuis notre repository GitHub : https://github.com/Digital-Garden-Nantes/logo-branding
- Ou copiez les liens -> https://cdn-01.digitalgarden.fr/logo-branding/logo-branding@latest/dist/logo-branding.min.js - https://cdn-01.digitalgarden.fr/logo-branding/logo-branding@latest/dist/logo-branding.min.css
