Bannières cookies : 10 exemples de design et d'UX décryptés

La bannière cookies est souvent le premier élément d'interface qu'un visiteur voit en arrivant sur un site. Elle s'affiche avant que la page d'accueil ait pu délivrer son message, et la réponse qu'elle obtient détermine la part de l'audience que les équipes marketing, produit et data pourront ensuite mesurer.

Sur beaucoup de sites, elle se résume pourtant à un bloc de texte juridique posé sur fond blanc, interchangeable avec celui du site visité juste avant. Les dix marques présentées ici ont fait un autre choix : en adoptant Axeptio, leur bannière reprend leur direction artistique, emprunte le vocabulaire de leur secteur et, pour certaines, porte un message commercial à part entière.

Voyage, cosmétique, literie, gestion de patrimoine, chaussures, artisanat, football, opéra, basketball à l’international : les secteurs des 10 exemples sélectionnés sont volontairement variés. Chaque analyse vous permettra de découvrir ce qui se cache derrière la marque, et ainsi de comprendre ce que sa bannière cherche à exprimer, avant d'analyser les choix de design qui la distinguent du reste du web.

Cet article traite du design et de l'expérience utilisateur des bannières. Pour comparer les solutions de gestion du consentement entre elles, consultez notre comparatif des 5 meilleures CMP en 2026.

Comment nous avons sélectionné ces 10 bannières cookies

Les dix exemples proviennent de sites clients d'Axeptio et ont été retenus selon trois critères. Le premier est la qualité de l'expérience utilisateur : lisibilité du texte, clarté des choix proposés, place de la bannière dans le parcours de navigation. Le deuxième relève de l'expérience marketing, c'est-à-dire la cohérence avec l'identité de la marque et la capacité de la bannière à transmettre un message. Le troisième est la performance mesurée dans le back-office Axeptio.

Cette performance s'évalue à partir de trois indicateurs. Le taux d'interaction mesure la part des visiteurs exposés à la bannière qui font un choix, quel qu'il soit. Le taux de consentement rapporte le nombre d'acceptations au nombre de visiteurs ayant interagi. Le taux d'opt-in rapporte les consentements obtenus à l'ensemble des visiteurs exposés : c'est lui qui fixe le volume de données réellement exploitables.

Pour chaque bannière, nous avons observé les mêmes composants :

1. Le format et l'emplacement : bandeau positionné dans un coin de la page ou mur de consentement centré à l'écran.
2. Le délai d'affichage : apparition immédiate ou après quelques secondes de navigation.
3. L'en-tête visuel : absence de visuel, photo fixe ou vidéo intégrée en haut de la bannière.
4. L'habillage : couleurs, logo, illustrations et ombre portée, qui va d'un léger relief autour de la bannière à un voile coloré sur toute la page.
5. Le texte : titre, ton, manière d'expliquer à quoi servent les cookies, jusque dans le panneau de personnalisation.
6. Les boutons : disposition des options d'acceptation, de refus et de personnalisation, au même niveau pour respecter la symétrie du consentement.
7. Le pebble : la pastille qui permet de rouvrir la bannière à tout moment, que certains sites complètent avec un lien en pied de page.

Les 10 exemples de design de bannières cookies

1. TUI France : une bannière conçue comme un accueil, puis utilisée comme un média

TUI France est la filiale française du groupe TUI, leader voyagiste sur le marché français, qui combine un modèle de tour-opérateur et de distributeur autour de quatre marques : Club Marmara et Club Lookéa pour les clubs de vacances, Nouvelles Frontières pour les voyages itinérants et TUI Sélection pour les hôtels partenaires. Elle s'appuie aussi sur un réseau de plus de 200 TUI Stores en France.

En agence, l'accueil passe par le conseiller ; en ligne, la CMP est le premier écran où cette notion d’hospitalité peut s'exprimer. Le texte emprunte donc le vocabulaire du voyage, du titre “Une escale gourmande avec nos cookies 🍪✈️” jusqu'à la conclusion “Prêt(e) à embarquer ?”. Entre les deux, les finalités sont reformulées en bénéfices pour l’utilisateur, chacune introduite par un emoji : une expérience fluide “digne d'un circuit bien organisé”, des recommandations adaptées aux envies de vacances, une analyse des performances pour améliorer le parcours.

Le déclenchement suit cette même logique. La bannière apparaît après quelques secondes, le temps pour le visiteur d'arriver sur le site, puis s'affiche au centre de l'écran sous forme de mur de consentement, sans assombrir la page. Le design, construit autour d'une vague, fait écho à celle du logo TUI. Le bleu de la marque colore le bandeau supérieur et le bouton “Accepter”, de même taille que “Gérer les cookies”, tandis que le refus passe par un onglet “Continuer sans accepter” posé au-dessus de la carte.

La vidéo intégrée en haut de la bannière fait la singularité de la CMP. Elle se lance automatiquement, sans le son, et deux boutons discrets permettent de l'activer ou de mettre la lecture en pause. TUI France l'a d'abord utilisée pour annoncer le lancement de son application mobile, assorti d'une offre de 30 € sur un prochain voyage, en reprenant une vidéo produite pour ses autres prises de parole. Le message a changé depuis : la vidéo présente aujourd'hui le paiement en Chèques-Vacances Connect, la version dématérialisée des Chèques-Vacances. La bannière fonctionne ainsi comme un emplacement média que la marque renouvelle au fil de ses actualités.

La stratégie complète et la gestion du consentement sur l’application mobile sont détaillées dans notre livre blanc consacré à TUI France.

2. Thalgo : le délai d'affichage expliqué au visiteur

Thalgo, premier laboratoire français spécialisé dans les soins à base d'algues, se présente aujourd'hui comme le leader mondial de la cosmétique marine professionnelle, présent dans plus de 15 000 instituts, spas et centres de thalassothérapie à travers le monde.

Comme chez TUI, la bannière n'apparaît qu'après quelques secondes de navigation. La différence est que Thalgo adapte le message en conséquence. Sous le titre, le texte commence par “On a attendu d'être sûrs que le contenu de ce site vous intéresse avant de vous déranger, mais on aimerait bien vous accompagner pendant votre visite”. Un choix d’affichage devient une marque d'attention envers le visiteur. Le texte pose ensuite la question de l'utilité des cookies et y répond en trois lignes : le bon fonctionnement du site, l'analyse du trafic pour optimiser la navigation, les publicités ciblées proposées par des tiers.

L'en-tête diffuse un film de marque d'un peu plus d'une minute et demie, lancé automatiquement : une côte rocheuse au coucher du soleil sur laquelle s'incruste le logo, des laminaires sous l'eau, des tubes de laboratoire remplis d'algues, un flacon posé sur des rochers, puis un soin en cabine. En quelques plans, la vidéo résume le parcours de la marque, de la mer au laboratoire puis à l'institut, fidèle à la signature #lamervousveutdubien que Thalgo diffuse sur ses réseaux.

Le bandeau bleu et le logo placé à côté du titre complètent l'habillage brandé, tandis qu'une ombre portée bleu-gris voile le reste de la page pour concentrer l'attention sur la bannière.

3. Merinos : un mur de consentement user friendly mis en lumière pour inviter à faire un choix

Merinos se décrit comme une marque française de literie, à la fois moderne, simple, confortable et accessible. Ses matelas sont fabriqués à Vesoul depuis 1958 et testés en France, un engagement qui fait l’ADN de la marque depuis sa création.

Pour la gestion du consentement, Merinos a d'abord fait un choix d'emplacement : la bannière s'affiche au centre de l'écran, en mur de consentement, plutôt que dans un coin de la page. Son ombre portée, réglée en blanc et étendue à toute la fenêtre, éclaircit le reste du site. La carte ressort sans que la page paraisse éteinte, et le visiteur est invité à exprimer un choix plutôt qu'à poursuivre sa navigation sans répondre, ce qui sert directement le taux d'interaction.

Le texte file la métaphore de la literie d'un bout à l'autre. Le titre propose un cookie “moelleux comme un matelas Merinos”, les cookies indispensables font fonctionner le site “comme sur des roulettes”, la mesure d'audience analyse les visites “sans vous réveiller”, et la conclusion joue avec le vocabulaire du produit : “ferme, moelleux ou à mémoire de forme… euh pardon, acceptés ou refusés !”. Le bandeau cyan et le logo accompagné d'un petit drapeau tricolore rappellent l'identité de la marque.

La vidéo d'en-tête, une quinzaine de secondes en boucle, montre l'envers du décor : des mains sur une machine à coudre, des salariés en atelier, le coq bleu et blanc qui sert de mascotte à la marque, l'usine et le panneau d'entrée de ville de Vesoul. Ce choix rejoint le discours de Merinos sur des matelas fabriqués “par de vrais gens” : avant même de parcourir le catalogue, le visiteur voit les personnes qui conçoivent les produits. Merinos avait d'ailleurs testé en avant-première l'intégration de la vidéo dans la bannière Axeptio, en réutilisant un film produit pour sa communication.

4. Deco Cuir : une visite de l'atelier dès la bannière de consentement

Deco Cuir est une entreprise française spécialisée dans le travail du cuir. Depuis 2009, elle accompagne particuliers et professionnels dans leurs projets de maroquinerie, de sellerie, de reliure ou d'ameublement, avec plus de 17 000 références en ligne. Elle est aussi présente à Campbon, près de Nantes, avec le plus grand magasin de France dédié au travail du cuir, où des artisans animent chaque mois des formations et des ateliers.

La vidéo d'en-tête, une trentaine de secondes en boucle, montre l'entreprise au travail : une machine de découpe dans l'atelier, une peau découpée à l'emporte-pièce, une mesure d'épaisseur, des rayonnages de rouleaux de cuir, mais aussi l'entrepôt et la préparation des colis, sur laquelle s'incruste le logo. Le film couvre ainsi les deux facettes de l'entreprise : le savoir-faire autour du cuir et la logistique d'une boutique en ligne qui expédie dans le monde entier. Deco Cuir a aussi choisi de mettre en scène deux personnages cookies personnalisés apportant une dimension ludique à l’étape de consentement.

La bannière n'apparaît qu'après plusieurs secondes, en bas à gauche de l'écran. Son ombre portée, teintée du même brun foncé que le bandeau, voile la page derrière elle : la couleur de la marque se retrouve jusque dans l'effet de mise en avant.

5. Insinia : le vocabulaire du sur-mesure et un pebble qui annonce sa fonction

Insinia est une marque du Groupe Astoria, qui regroupe 55 bureaux en France et accompagne 120 000 clients et familles dans la gestion de patrimoine. Conseil en stratégie, investissements financiers et immobiliers, family office : la marque se définit par une approche individualisée et personnalisée du patrimoine, avec la conviction que chaque client mérite une stratégie sur mesure.

Le titre de la bannière transpose cette promesse au consentement : “Votre expérience mérite une gestion sur mesure”. Le texte, sobre, se termine par une phrase qui résume la posture de la marque : “Votre choix reste central.” Bandeau bleu nuit, logo doré à côté du titre, mention “Continuer sans accepter” intégrée en blanc dans le bandeau : le registre feutré correspond à celui qu'attend une clientèle venue confier son patrimoine.

La vidéo d'en-tête enchaîne des scènes choisies pour cette même clientèle avec des moments de vie qui illustrent les objectifs que la marque met en avant sur son site : protéger sa famille, préparer sa retraite, transmettre son patrimoine. Positionnée en bas à gauche avec une ombre légère, la bannière se détache simplement du fond sombre du site.

Insinia a aussi retravaillé un élément : le pebble, la pastille qui permet de rouvrir la bannière, ornée d'un rameau doré et de la mention “RGPD” dans le même doré que le logo. Pour un public peu familier du sujet, l'acronyme indique immédiatement à quoi sert ce bouton, et la pastille, visible dès l'arrivée sur le site, prolonge la charte graphique jusque dans ce détail.

6. avô abilio : une bannière qui prolonge le récit de la marque

avô abilio est une boutique “inspirée par la saudade”, cette douce nostalgie portugaise. Imaginée par Manon et Amélie, elle rend hommage au grand-père de Manon, Abilio, né en 1917 dans la vallée du Douro. Huile d'olive vierge extra, savons artisanaux, hirondelles en céramique, textiles upcyclés : les produits sont faits main par des familles de producteurs et d'artisans du nord du Portugal et de l'Hérault.

Plus discrète que les précédentes, cette bannière ne cherche pas à se détacher du site. Pas de voile sur la page, une ombre légère autour du widget, un bandeau vert sauge accordé à la palette de la boutique : l'effort porte sur le récit. Sous le titre “Bienvenue chez avô abilio !”, le texte reprend l'histoire familiale : “Ici, on cultive l'amour de l'huile d'olive, de la tradition portugaise et du partage à la manière de notre grand-père abilio. Mais avant de vous inviter à notre table, nous avons besoin de parler cookies.” La suite file la métaphore en promettant une expérience “aussi riche et généreuse que notre huile d'olive”.

La photo d'en-tête montre justement une table dressée en extérieur et une bouteille avô abilio : l'image et le texte racontent la même scène. Long pour une bannière, le texte fonctionne parce qu'il se lit comme une invitation, dans le même esprit que le mot manuscrit glissé dans chaque colis. Un emoji olive dans le bouton “Ok pour moi” prolonge le clin d'œil, les trois boutons restent au même niveau, et la pastille qui permet de rouvrir la bannière prend la forme d'un galet du même vert sauge.

L'exemple montre qu'une plus petite marque peut obtenir une bannière singulière sans avoir à produire de vidéo hors budget : un texte écrit dans la voix de la marque et une intégration visuelle soignée suffisent.

7. Caval : des jeux de mots sur la chaussure jusque dans les finalités

Caval conçoit des chaussures et des vêtements confectionnés à la main au Portugal. Sa signature, “Walk Different”, résume le principe de la marque : renverser les lignes, les matières et les couleurs d'une chaussure à l'autre pour “twister” les règles de la symétrie. Toutes ses paires sont unisexes et fabriquées en Europe.

À l'inverse d'avô abilio, Caval joue sur le contraste : la carte claire, coiffée d'un bandeau orange, se détache nettement du fond bordeaux actuel du site. L'en-tête montre une photo de la collection, et un personnage de cookie orangé déborde sous l'image en tenant une basket dans chaque main pour se fondre totalement dans les codes du secteur. La bannière sert ainsi de vitrine produit, que la marque peut renouveler à chaque collection.

Le texte est le point fort de la bannière. Sous un titre sobre, “Notre site emploie des cookies !”, il promet de “CAVALer sur notre site sans faux pas”, avec une navigation “adaptée à votre pointure et sans jamais perdre le fil… ou le lacet”. Chaque finalité est ensuite expliquée par un jeu de mots : une pub “paire-sonnalisée”, une “ex-paire-rience” améliorée, et une dernière catégorie justifiée “parce qu'on ne fait jamais les choses à moitié… ni symétriquement”. Les trois boutons, eux, sont alignés au même niveau et à la même taille : une marque qui a bâti son identité sur l'asymétrie applique une stricte symétrie du consentement à l'endroit précis où elle est requise pour le visiteur.

8. Stade Rennais : le blason en grand pour fédérer son audience

Le Stade Rennais Football Club a été fondé le 10 mars 1901, ce qui en fait l'un des plus anciens clubs de football en France. Pensionnaire de Ligue 1, le club rouge et noir compte trois Coupes de France à son palmarès.

Un club de football s'adresse d'abord à ses supporters, et sa bannière est pensée pour eux. L'en-tête montre le Roazhon Park plein, tribunes rouges et tifos déployés. Le blason du club, l'écu rouge et noir daté de 1901, chevauche la photo dans un format bien plus grand que le logo discret adopté par la plupart des marques.

Le titre, “Les cookies entrent en jeu ! ⚽️”, ouvre un texte entièrement écrit dans le lexique du football. Les cookies y sont comparés à “un bon contrôle de balle”, le club “aligne la meilleure compo”, et chaque finalité trouve son image : la “passe parfaite entre nos pages” pour les cookies essentiels, “lire le jeu” pour la mesure d'audience, des offres “aussi précises qu'un centre millimétré” pour la publicité. L'ombre portée noire, étendue à toute la page, l'assombrit et agit comme un coup de projecteur sur la bannière, favorisant le taux d’interaction.

9. Opéra national de Paris : l'épure, pour laisser la scène au site

L'Opéra national de Paris programme chaque saison opéras, ballets et concerts sur deux scènes, le Palais Garnier et l'Opéra Bastille. Son site fait à la fois office de vitrine artistique et de billetterie pour l'une des institutions culturelles les plus connues au monde.

Membre de la communauté Axeptio depuis de nombreuses années, l'Opéra a travaillé très tôt le ton de sa bannière : une précédente version, conçue comme un “cookie opéra” et rédigée dans le vocabulaire de l'art lyrique, avait fait l'objet d'un témoignage sur notre blog. La version actuelle prend le contre-pied des exemples précédents : ni image ni vidéo en en-tête, et une bannière nettement plus épurée que les autres.

Ce choix s'explique par la nature du site, dont la page d'accueil est occupée par de grands visuels de spectacles qui restent visibles, légèrement assombris, derrière la bannière. Une image supplémentaire leur aurait fait concurrence. La bannière se limite donc à une palette noir et blanc, sans logo, avec un bandeau noir terminé par une découpe courbe caractéristique du design d’Axeptio.

La sobriété laisse la vedette aux productions de la saison et donne à l'ensemble une élégance cohérente avec l'institution. Seule signature visible : la pastille qui permet de rouvrir la bannière, un rond blanc frappé du monogramme “OP”.

Le texte porte donc l'essentiel de la personnalité de la bannière : “Les cookies entrent en scène... et le Chef d'orchestre, c'est vous !”. La formule rappelle au visiteur qu'il garde la main sur ses choix, sans quitter le registre du spectacle.

10. FIBA : personnaliser une bannière dans le cadre contraint du TCF

Fondée en 1932, la Fédération internationale de basketball (FIBA) est la seule autorité du basketball reconnue par le Comité international olympique. Depuis son siège en Suisse, elle coordonne 212 fédérations nationales et organise notamment la Coupe du monde et l'EuroBasket. En ligne, elle ambitionne de devenir la référence mondiale du basketball, avec un site dédié pour chaque compétition et une audience répartie sur tous les continents.

Sur certains de ses sites, la FIBA diffuse de la publicité programmatique. Elle utilise le Transparency & Consent Framework (TCF), le standard de l'IAB Europe qui permet aux éditeurs de transmettre les choix des visiteurs à leurs partenaires publicitaires. Ce standard impose des finalités et des mentions spécifiques, ce qui réduit fortement la marge de manœuvre en termes de personnalisation.

La bannière de fiba.basketball montre ce qui reste possible en passant par la solution Axeptio for Publishers. Son format diffère des neuf autres exemples : une fenêtre plus large, centrée à l'écran, qui présente les grandes catégories de finalités sous forme de menus dépliants et indique le nombre de partenaires publicitaires.

L'habillage, en revanche, appartient à la FIBA. La fenêtre adopte un thème sombre, avec le logo FIBA Basketball en dégradé jaune-vert en haut à droite qui ressort ainsi beaucoup mieux. Sur les autres sites de la FIBA, la bannière reprend à chaque fois les couleurs et logos propres à chaque compétition, le tout décliné en plusieurs langues. Le projet est détaillé dans notre livre blanc consacré à la FIBA disponible en téléchargement ici.

Design de bannière cookies : les bonnes pratiques à retenir

Ces dix bannières reposent sur des partis pris différents, mais elles appliquent un socle commun de principes, réutilisables quel que soit le secteur.

• Choisir l’affichage et le niveau de mise en avant selon l'objectif. Une bannière centrée, en mur de consentement, favorise l'interaction (Merinos, TUI France). Une ombre portée étendue à toute la page concentre l'attention sur la bannière (Thalgo, Stade Rennais), un simple contraste de couleurs suffit sur un site au fond déjà marqué par une teinte spécifique (Caval), et une bannière fondue dans la palette du site mise sur la discrétion ou l’élégance (avô abilio, Opéra de Paris).
• Teinter l'ombre portée aux couleurs de la marque. Blanche chez Merinos, brune chez Deco Cuir, noire chez le Stade Rennais : la teinte de l’ombre portée prolonge la charte graphique jusque dans l'effet de mise en avant.
• Différer l'affichage de quelques secondes. Le visiteur découvre d'abord la page avant d'être sollicité (TUI France, Deco Cuir). Mentionner ce délai dans le texte en fait une marque d'attention (Thalgo).
• Écrire un titre dans le vocabulaire du secteur. Une formule courte suffit à installer le ton.
• Traduire les finalités en bénéfices pour l’utilisateur. Le visiteur doit comprendre ce que les cookies lui apportent sans avoir à déchiffrer un texte juridique. Une métaphore filée, de la literie au football, rend l'explication beaucoup plus ludique (Merinos, Caval, Stade Rennais).
• Garder la voix de la marque d'un bout à l'autre. Le ton doit se retrouver dans le texte principal comme dans l’étape de personnalisation du choix (Opéra national de Paris), quitte à écrire plus long qu'un texte standard s'il reste naturel et donc lisible (avô abilio).
• Donner un rôle précis à la vidéo. Film de marque, savoir-faire, visages des équipes ou annonce commerciale : la vidéo fonctionne quand elle porte un message (Thalgo, Merinos, Deco Cuir, TUI France). Lancée sans le son, avec des boutons pour l'activer ou la mettre en pause, elle ne s'impose pas au visiteur.
• Réutiliser les contenus existants et renouveler le message. Les films de marque et vidéos de campagne déjà produits trouvent dans la bannière un point de diffusion supplémentaire, sans nouveau coût de production.
• Doser le visuel en fonction du site. Sur un site déjà très illustré, un bandeau épuré met en valeur l'arrière-plan (Opéra national de Paris). Une photo fixe suffit souvent à ancrer la bannière dans l'univers de la marque, surtout quand elle illustre le texte (avô abilio, Stade Rennais).
• Décliner la charte graphique jusqu'à la pastille / le pebble. Une pastille “RGPD” (Insinia), un monogramme (Opéra national de Paris) ou un galet aux couleurs de la boutique (avô abilio) aident le visiteur à retrouver ses préférences tout en restant dans l'univers de la marque. Quand la pastille est masquée, un lien en pied de page doit prendre le relais pour permettre à l’utilisateur de revenir facilement sur son choix.
• Mesurer et tester chaque modification. Suivre les taux d'interaction, de consentement et d'opt-in après chaque changement, et comparer les variantes grâce à la fonction d'A/B testing d’Axeptio permet d’opter pour la meilleure configuration.