# Création de bannière : bannières web, réseaux et print lisibles

[Canonical HTML page](https://gradiently.design/fr/guide/banner-design)

Les bannières sont longues, fines, souvent à moitié couvertes par une photo de profil ou recadrées sur téléphone. Concevez pour cette forme et quelques mots portent toute une marque. Toutes les tailles utiles sont ci-dessous.

## The short version

- Les bannières sont des formats larges, d’environ 2:1 pour les bannières de blog et d’e-mail à 6:1 pour une couverture de page entreprise LinkedIn.
- Dans une bannière large, l’œil lit de gauche à droite, donc les mots doivent tenir en un bloc compact plutôt que s’étaler sur toute la largeur.
- La plupart des bannières sociales sont en partie couvertes par une photo de profil ou recadrées sur téléphone, donc le contenu important a sa place près du centre.
- Une bannière de chaîne YouTube fait 2560 × 1440 pixels, mais seule la bande centrale d’environ 1546 × 423 pixels s’affiche sur tous les appareils.
- Les bannières imprimées comme les roll-up se lisent à plusieurs mètres : elles demandent bien moins de mots et un texte bien plus grand que les bannières web.

Une bonne **création de bannière** travaille avec la forme au lieu de lutter contre elle. Une bannière est large et basse : donnez-lui un seul bloc de mots compact, un titre court et éventuellement une ligne d’appui, placé là où rien ne le couvrira, et laissez le fond porter la couleur sur le reste de la largeur. Vérifiez d’abord la taille et la zone de sécurité de chaque plateforme : une bannière de profil LinkedIn fait 1584 × 396 pixels et perd son coin inférieur gauche sous votre photo, alors qu’une bannière YouTube fait 2560 × 1440 et n’affiche qu’une bande centrale sur téléphone.

## Tailles de bannières pour le web et les réseaux

| Bannière | Taille (px) | Proportion | Ce qui la couvre |
| --- | --- | --- | --- |
| Bannière de profil LinkedIn | 1584 × 396 | 4:1 | Photo de profil, en bas à gauche |
| Couverture de page entreprise LinkedIn | 2256 × 382 | Environ 6:1 | Logo, en bas à gauche |
| En-tête X | 1500 × 500 | 3:1 | Photo de profil, en bas à gauche |
| Couverture Facebook | 1640 × 624 | Environ 2,6:1 | Photo de profil, recadrée sur téléphone |
| Bannière de chaîne YouTube | 2560 × 1440 | 16:9 | Seul le centre s’affiche sur tous les appareils |
| Bannière Bluesky | 3000 × 1000 | 3:1 | Avatar, en bas à gauche |
| Hero de site web | 1920 × 1080 | 16:9 | Navigation en haut |
| Bannière de blog et en-tête d’e-mail | 1200 × 600 | 2:1 | Rien, mais souvent vue en petit |
| Bannière de boutique Etsy | 3360 × 840 | 4:1 | Recadrée sur téléphone |

Tailles issues de la liste de formats de Gradiently, qui suit la taille d’import recommandée par chaque plateforme. Les guides par plateforme vont plus loin : [taille de bannière LinkedIn](https://gradiently.design/fr/guide/linkedin-banner-size) et [taille de bannière YouTube](https://gradiently.design/fr/guide/youtube-banner-size).

- Bannière de blog 2:1: 1200 × 600
- En-tête X 3:1: 1500 × 500
- Bannière LinkedIn 4:1: 1584 × 396
- Page entreprise LinkedIn 6:1: 2256 × 382

Quatre bannières à l’échelle. Plus la forme s’affine, plus la place pour les mots diminue, bien plus vite que la largeur n’augmente.

## Mettre en page les mots dans une bannière large

On lit une bannière comme une ligne de texte : de gauche à droite, rapidement. Étaler les mots sur toute la largeur oblige l’œil à aller trop loin. Regroupez-les en un bloc, environ un tiers de la largeur, et composez le titre assez grand pour qu’il reste lisible quand toute la bannière est réduite à la largeur d’un écran de téléphone.

Une bannière LinkedIn large avec un titre court à droite et un dégradé qui remplit le reste

Une bannière de profil LinkedIn avec les mots à l’écart de la photo de profil, en bas à gauche.

Une bannière d’en-tête X annonçant de nouveaux épisodes de podcast chaque jeudi sur un fond en dégradé

Un en-tête X : une ligne, une information, et rien d’important dans le coin de l’avatar.

À cette hauteur, la hiérarchie doit rester simple. Deux niveaux sont généralement la limite : un titre et une petite ligne au-dessus ou en dessous. S’il vous en faut un troisième, il a sans doute sa place sur le profil lui-même. La [hiérarchie visuelle](https://gradiently.design/fr/guide/visual-hierarchy) explique comment taille et espacement font ce travail sans décoration supplémentaire.

## Zones de sécurité et recadrages

Chaque plateforme recadre ou couvre sa bannière différemment sur ordinateur et sur téléphone. L’approche sûre est partout la même : laissez le fond aller d’un bord à l’autre, et gardez mots et logos au milieu du cadre, loin du coin où se trouve l’avatar.

1. **Repérez le coin couvert** Sur LinkedIn, X et Bluesky, la photo de profil recouvre le bas à gauche. Ne mettez que du fond dans cette zone.
2. **Anticipez les recadrages sur téléphone** Facebook et Etsy rognent les côtés sur téléphone. Gardez les mots dans les deux tiers centraux de la largeur.
3. **Utilisez la bande centrale de YouTube** Sur le cadre de 2560 × 1440, seule la zone centrale d’environ 1546 × 423 pixels s’affiche sur tous les appareils. Mettez-y le nom et les mots.
4. **Vérifiez en taille réelle** Publiez, puis regardez sur un téléphone et un ordinateur. L’aperçu d’un outil de design ne peut pas montrer l’interface de la plateforme, et les plateformes changent leurs mises en page : consultez leurs pages d’aide avant un grand lancement.

## Bannières imprimées : roll-up et signalétique d’événement

Un roll-up, souvent en 850 × 2000 mm, pose le problème inverse : il est haut et vu à plusieurs mètres par des gens qui passent. Il lui faut un logo et un titre dans le tiers supérieur, à hauteur des yeux, très peu de choses dans le tiers inférieur, caché derrière les tables et les jambes, et un texte assez grand pour se lire de l’autre bout de la pièce. Demandez à votre imprimeur la résolution voulue ; les grandes bannières s’impriment normalement à partir de fichiers bien en dessous de 300 dpi, car personne ne les regarde de près.

### À éviter

- Un paragraphe qui explique ce que vous faites
- Des mots étalés sur toute la largeur
- Un petit texte dans le coin caché par l’avatar
- Une photo chargée derrière le titre
- Les informations clés en bas d’un roll-up

### À faire

- Quatre à huit mots qui disent qui vous êtes
- Un seul bloc de texte compact
- Seulement du fond là où se trouve l’interface
- Une zone de couleur calme derrière les mots
- Logo et titre à hauteur des yeux

Pour les stands et les scènes, voyez le [design de fond d’événement](https://gradiently.design/fr/guide/event-backdrop-design), et pour les grands formats papier, les [tailles d’affiche](https://gradiently.design/fr/guide/poster-size-guide).

## Un seul style sur toutes les bannières

La plupart des gens ont besoin de cinq ou six bannières à la fois : LinkedIn, X, YouTube, un en-tête d’e-mail, un hero de site. Elles ressemblent à une seule marque quand le fond, la typographie et la couleur restent constants et que seule la mise en page change. Un dégradé est idéal pour cela, car il n’a pas de sujet à recadrer, à condition d’être rendu pour chaque forme plutôt qu’étiré.

Un dégradé de bannière large, sombre à gauche: `linear-gradient(100deg, #0e1a2b 0%, #183b56 40%, #2a7f8f 75%, #9fd8cb 100%)`

Un fondu horizontal qui reste sombre à gauche, là où se trouve un avatar ou un logo, et s’éclaircit vers la droite. Copiez-le comme point de départ pour une bannière de profil.

Dans Gradiently, un Mark est rendu à neuf pour chaque taille de bannière, place sa zone la plus calme derrière vos mots et laisse l’encre automatique choisir un texte clair ou foncé ligne par ligne. Avec Pro, une création se décline dans toutes les tailles en une étape, donc les bannières LinkedIn, X et YouTube arrivent ensemble. L’idée d’un fond unique et reconnaissable est développée dans [un style signature](https://gradiently.design/fr/guide/brand-signature-look).

## FAQ

### Quelle taille doit faire une bannière ?

Tout dépend de sa destination : 1584 × 396 pour un profil LinkedIn, 1500 × 500 pour X, 2560 × 1440 pour YouTube et 1200 × 600 pour une bannière de blog ou d’e-mail.

### Où placer le texte sur une bannière de réseau social ?

En un bloc compact près du centre ou à droite, loin du coin inférieur gauche où se trouve généralement la photo de profil.

### Quelle est la zone de sécurité d’une bannière YouTube ?

Environ 1546 × 423 pixels au milieu de l’image de 2560 × 1440. Seule cette zone s’affiche sur tous les appareils.

### Combien de mots mettre sur une bannière ?

Quatre à huit pour le titre, plus une petite ligne d’appui au maximum. Les bannières sont vues brièvement et souvent en petit.

### Quelle résolution pour une bannière imprimée ?

Demandez à votre imprimeur. Les grandes bannières vues de loin s’impriment généralement à partir de fichiers bien en dessous de 300 dpi en taille réelle.