# Visuels Cyber Monday : un style pour la promo en ligne

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

Le Cyber Monday se joue presque entièrement sur écran, dans les boîtes de réception et sur les pages de paiement. Ses visuels n’ont pas le même rôle que ceux du Black Friday, et méritent leur propre style, plus froid.

## The short version

- Les visuels Cyber Monday fonctionnent mieux avec une palette froide et numérique, clairement liée à votre style Black Friday mais visiblement différente.
- Comme le Cyber Monday est une promo en ligne, la bannière du site et l’en-tête d’e-mail comptent autant que les posts sociaux.
- Chaque visuel Cyber Monday doit mener à une action, généralement un lien, et dire simplement quand l’offre se termine.
- Une bannière de site étroite n’a besoin que d’une courte ligne, car elle se lit en moins d’une seconde en chemin vers autre chose.
- Des bleus électriques, cyans et violets sur un fond presque noir paraissent numériques sans motifs de circuits ni effets de glitch.

Les meilleurs **visuels Cyber Monday** paraissent sans équivoque numériques et mènent quelque part : une palette froide et électrique sur fond sombre, une courte ligne et un lien. Le Cyber Monday est la promo en ligne : le travail ne se limite donc pas aux posts sociaux. C’est la bannière de votre site, l’en-tête de l’e-mail qui arrive ce matin-là et l’aperçu du lien que l’on voit au partage. Faites-les tous dans un même style et la journée devient un événement plutôt qu’une répétition du vendredi.

## En quoi le Cyber Monday diffère du Black Friday

Le Black Friday est né comme une journée en magasin, et ses visuels empruntent encore aux vitrines : couleurs chaudes, grandes enseignes. Le Cyber Monday doit son nom aux achats en ligne, et la plupart de ses visuels se voient sur un téléphone une seconde avant le tap. Cela change trois choses.

### Black Friday

- Fonds chauds, or et braise
- Construit autour de l’annonce
- Posts de fil et stories en tête
- Peut durer plusieurs jours

### Cyber Monday

- Fonds froids, bleu électrique et cyan
- Construit autour du clic
- E-mail, bannière de site et aperçus de lien en tête
- Généralement un jour, donc l’urgence est réelle

Si vous avez mené une séquence Black Friday, gardez la typographie, la mise en page et la voix, et changez la température. On doit vous reconnaître tout de suite et voir pourtant que quelque chose de nouveau commence. [Les posts Black Friday](https://gradiently.design/fr/guide/black-friday-post-ideas) installe cette première moitié.

## Couleurs et palettes Cyber Monday

Le numérique n’a pas besoin de circuits imprimés, d’effets de glitch ni de code binaire en arrière-plan. La couleur suffit. Une lumière qui semble venir d’un écran, en bleu, cyan ou violet, sur un fond encre profond, se lit tout de suite comme en ligne. Gardez un seul accent et laissez le reste dans le sombre.

- Bleu écran: `radial-gradient(circle at 70% 25%, #38bdf8 0%, #0c4a6e 38%, #050b14 78%)`
- Halo cyan: `radial-gradient(circle at 25% 70%, #22d3ee 0%, #164e63 40%, #04101a 80%)`
- Indigo vers cyan: `linear-gradient(135deg, #0b1026 0%, #3730a3 50%, #22d3ee 100%)`
- Violet électrique: `radial-gradient(circle at 80% 80%, #a855f7 0%, #3b0764 40%, #0a0614 80%)`

Quatre fonds Cyber Monday. Chacun associe une base presque noire à une couleur de lumière d’écran.

- Encre: #050b14
- Bleu profond: #0c4a6e
- Bleu écran: #38bdf8
- Texte glacé: #e0f2fe
- Or du vendredi: #d4a24c

Une palette qui prend le relais du Black Friday : l’accent or reste, utilisé en petit, tandis que le fond devient bleu.

Le néon est saisissant sur un téléphone sombre et affreux quand il vibre contre lui-même. [Les dégradés néon](https://gradiently.design/fr/guide/neon-gradients) montre comment garder des couleurs vives propres, et [les palettes cyberpunk](https://gradiently.design/fr/guide/cyberpunk-colors) va plus loin si votre marque peut l’assumer.

## Bannière Cyber Monday pour votre site

Une bannière de site se lit en chemin vers autre chose : elle n’a droit qu’à une courte ligne et une échéance. La fine bande au-dessus de la navigation est la version la moins intrusive et marche sur toutes les pages. En voici une en CSS simple, avec une couleur de repli au cas où le dégradé ne se charge pas et un texte qui reste clair sur chaque partie.

```html
<div class="cm-banner" role="region" aria-label="Cyber Monday sale">
  <a href="/sale">Cyber Monday: 25% off everything, today only</a>
</div>

<style>
  .cm-banner {
    background-color: #050b14;
    background-image: linear-gradient(90deg, #050b14 0%, #0c4a6e 50%, #050b14 100%);
    text-align: center;
    padding: 10px 16px;
  }
  .cm-banner a {
    color: #e0f2fe;
    font: 600 15px/1.4 system-ui, sans-serif;
    text-decoration: none;
  }
</style>
```

Une bande d’annonce fine. La couleur la plus sombre est aux deux extrémités et la lumière seulement au milieu, pour que le texte clair garde son contraste.

Pour un grand visuel plutôt qu’une bande, concevez en 1920×1080 et gardez les mots dans le tiers gauche ou central, où ils résistent au recadrage sur les petits écrans. [Les fonds de bandeau de site](https://gradiently.design/fr/guide/website-hero-background) traite des tailles et des performances.

## Design d’e-mail Cyber Monday

Pour beaucoup de boutiques, l’e-mail du Cyber Monday est le visuel le plus important de la journée. L’en-tête fait 1200×600, et sur téléphone le premier écran d’un e-mail ne montre souvent guère plus : l’offre doit donc être dans sa moitié haute. Gardez les mots en texte vivant dans l’e-mail quand c’est possible, et utilisez l’image d’en-tête pour l’ambiance et le titre.

Large en-tête d’e-mail Cyber Monday avec un dégradé bleu et les mots Aujourd’hui seulement, 25% de remise

Un en-tête d’e-mail en 1200×600 : l’offre dans la moitié haute, que toutes les boîtes affichent.

- L’objet et l’en-tête doivent dire la même chose avec les mêmes mots.
- Mettez un seul bouton sous l’en-tête, pas cinq.
- Écrivez l’échéance avec un fuseau horaire, surtout si vous vendez à l’étranger.
- Vérifiez l’en-tête en mode sombre, où certaines boîtes modifient les couleurs autour.

[Le design d’en-tête d’e-mail](https://gradiently.design/fr/guide/email-header-design) en dit plus sur les tailles et les particularités du mode sombre.

## Posts et stories Cyber Monday

Sur les réseaux, le Cyber Monday est court : deux ou trois posts suffisent. Un lancement le matin, un rappel en story à midi et un dernier appel le soir. Chacun doit envoyer vers le lien : laissez donc de la place dans les stories pour le sticker lien.

Post de promo Cyber Monday en portrait avec un dégradé bleu électrique et l’offre en grands caractères

Le post du matin : occasion, offre et échéance.

Story verticale décomptant les six dernières heures d’une promo Cyber Monday

La story du soir, avec de la place dessous pour le sticker lien.

| Visuel | Format | Remarque |
| --- | --- | --- |
| Post Instagram | 1080×1350 | Lancement du matin |
| Story | 1080×1920 | Rappels avec sticker lien |
| En-tête d’e-mail | 1200×600 | Offre dans la moitié haute |
| Bandeau de site | 1920×1080 | Mots dans le tiers central |
| Aperçu du lien | 1200×630 | Affiché quand la page de promo est partagée |

Tout ce dont une promo en ligne d’un jour a besoin, dans un seul style.

Faites tout cela la semaine d’avant, pas le lundi matin. Le jour J, vous voudrez surveiller les commandes et répondre aux messages, et la seule modification de design restante devrait être de remplacer « Plus que six heures » par « Plus qu’une heure » sur la dernière story.

> **Retirez-le à temps** Quand la promo se termine, retirez la bannière, remettez l’ancien aperçu du lien et archivez les stories. Une bannière Cyber Monday encore visible mercredi donne l’impression que l’échéance n’a jamais été réelle, et celle de l’an prochain sera un peu moins crue.

L’aperçu du lien est celui que l’on oublie. Quand quelqu’un partage votre page de promo, cette image est le visuel que voient ses amis : réglez-la pour la journée. [La taille de l’image Open Graph](https://gradiently.design/fr/guide/open-graph-image-size) montre comment. Avec Pro, Gradiently redimensionne un design terminé dans tous ces formats en une seule étape, et le fond garde sa zone la plus calme derrière les mots à chaque taille.

## FAQ

### Quand a lieu le Cyber Monday ?

Le Cyber Monday est le lundi après Thanksgiving aux États-Unis : il suit donc toujours le week-end du Black Friday. Beaucoup de boutiques proposent une offre du vendredi au lundi et changent de style pour le dernier jour.

### Quelles couleurs pour des visuels Cyber Monday ?

Des couleurs froides, évoquant l’écran, comme le bleu électrique, le cyan et le violet sur fond presque noir, paraissent numériques et distinguent la journée du Black Friday.

### Quelle taille pour un en-tête d’e-mail Cyber Monday ?

1200×600 pixels est une taille fiable. Gardez l’offre dans la moitié haute, car c’est ce que l’on voit d’abord sur un téléphone.

### Les visuels Cyber Monday doivent-ils ressembler à ceux du Black Friday ?

Gardez la même typographie, la même mise en page et la même voix pour qu’on vous reconnaisse, et changez la température des couleurs pour que le nouveau jour paraisse nouveau.

### Que doit dire une bannière de site Cyber Monday ?

Une courte ligne avec l’offre et l’échéance, liée à la page de promo. On survole une bannière, on ne la lit pas.
