# Cyber-Monday-Grafiken: ein Look für den Online-Sale

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

Der Cyber Monday spielt sich fast ganz auf Bildschirmen ab, in Postfächern und auf Bezahlseiten. Seine Grafiken haben eine andere Aufgabe als die des Black Friday und verdienen einen eigenen, kühleren Look.

## The short version

- Cyber-Monday-Grafiken wirken am besten mit einer kühlen, digitalen Palette, die klar mit deinem Black-Friday-Look verwandt, aber sichtbar anders ist.
- Weil der Cyber Monday ein Online-Sale ist, sind das Website-Banner und der E-Mail-Header genauso wichtig wie die Social-Posts.
- Jede Cyber-Monday-Grafik sollte zu einer Handlung führen, meist einem Link, und klar sagen, wann das Angebot endet.
- Ein schmales Website-Banner braucht eine einzige kurze Zeile, denn es wird in unter einer Sekunde auf dem Weg zu etwas anderem gelesen.
- Elektroblau, Cyan und Violett auf fast schwarzem Grund wirken digital, ohne Schaltkreismuster oder Glitch-Effekte.

Die besten **Cyber-Monday-Grafiken** wirken unverkennbar digital und zeigen irgendwohin: eine kühle, elektrische Palette auf dunklem Grund, eine kurze Zeile und ein Link. Der Cyber Monday ist der Online-Sale, die Arbeit besteht also nicht nur aus Social-Posts. Sie umfasst das Banner auf deiner Website, den Header der E-Mail, die an dem Morgen ankommt, und die Linkvorschau, die man beim Teilen sieht. Mach sie alle aus einem Look, und der Tag fühlt sich wie ein Ereignis an statt wie eine Wiederholung des Freitags.

## Wie sich der Cyber Monday vom Black Friday unterscheidet

Der Black Friday begann als Tag im Laden, und seine Bilder borgen noch immer von Schaufenstern: warme Farben, große Schilder. Der Cyber Monday ist nach dem Online-Shopping benannt, und die meisten seiner Grafiken sieht man auf dem Handy eine Sekunde, bevor jemand tippt. Das ändert drei Dinge.

### Black Friday

- Warme Gründe, Gold und Glut
- Gebaut um die Ankündigung
- Feed-Posts und Stories führen
- Kann mehrere Tage laufen

### Cyber Monday

- Kühle Gründe, Elektroblau und Cyan
- Gebaut um den Klick
- E-Mail, Website-Banner und Linkvorschau führen
- Meist ein Tag, die Dringlichkeit ist also echt

Wenn du eine Black-Friday-Folge gefahren bist, behalte Schrift, Layout und Stimme und ändere die Temperatur. Man sollte dich sofort erkennen und trotzdem sehen, dass etwas Neues begonnen hat. [Black-Friday-Posts für Social Media](https://gradiently.design/de/guide/black-friday-post-ideas) legt diese erste Hälfte an.

## Farben und Paletten für den Cyber Monday

Digital braucht keine Platinen, Glitch-Effekte oder Binärcode im Hintergrund. Die Farbe schafft das allein. Licht, das von einem Bildschirm zu kommen scheint, in Blau, Cyan oder Violett, vor tiefem Tintengrund, wirkt sofort online. Behalte einen Akzent und lass den Rest dunkel.

- Bildschirmblau: `radial-gradient(circle at 70% 25%, #38bdf8 0%, #0c4a6e 38%, #050b14 78%)`
- Cyan-Glühen: `radial-gradient(circle at 25% 70%, #22d3ee 0%, #164e63 40%, #04101a 80%)`
- Indigo zu Cyan: `linear-gradient(135deg, #0b1026 0%, #3730a3 50%, #22d3ee 100%)`
- Elektrisches Violett: `radial-gradient(circle at 80% 80%, #a855f7 0%, #3b0764 40%, #0a0614 80%)`

Vier Gründe für den Cyber Monday. Jeder paart eine fast schwarze Basis mit einer Farbe von Bildschirmlicht.

- Tinte: #050b14
- Tiefblau: #0c4a6e
- Bildschirmblau: #38bdf8
- Eistext: #e0f2fe
- Freitagsgold: #d4a24c

Eine Palette, die an den Black Friday anschließt: Der Goldakzent bleibt, klein eingesetzt, während der Grund blau wird.

Neon wirkt auf einem dunklen Handy aufregend und schrecklich, wenn es gegen sich selbst flimmert. [Neon-Farbverläufe](https://gradiently.design/de/guide/neon-gradients) zeigt, wie helle Farben sauber bleiben, und [Cyberpunk-Farbpaletten](https://gradiently.design/de/guide/cyberpunk-colors) geht weiter, wenn deine Marke es tragen kann.

## Cyber-Monday-Banner für deine Website

Ein Website-Banner wird auf dem Weg zu etwas anderem gelesen, bekommt also eine kurze Zeile und eine Frist. Der schmale Streifen über der Navigation ist die unaufdringlichste Variante und funktioniert auf jeder Seite. Hier einer in schlichtem CSS, mit einer Ersatzfarbe, falls der Farbverlauf nicht lädt, und Text, der auf jedem Teil hell bleibt.

```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>
```

Ein schmaler Ankündigungsstreifen. Die dunkelste Farbe sitzt an beiden Enden und das Licht nur in der Mitte, damit der helle Text seinen Kontrast behält.

Für ein volles Hero statt eines Streifens gestalte in 1920×1080 und halte die Wörter im linken oder mittleren Drittel, wo sie auf kleineren Bildschirmen das Beschneiden überstehen. [Website-Hero-Hintergründe](https://gradiently.design/de/guide/website-hero-background) behandelt Größen und Performance.

## E-Mail-Design für den Cyber Monday

Für viele Shops ist die Cyber-Monday-E-Mail die wichtigste Grafik des Tages. Der Header misst 1200×600, und auf dem Handy zeigt der erste Bildschirm einer E-Mail oft kaum mehr, das Angebot gehört also in die obere Hälfte. Halte die Wörter wo möglich als Live-Text in der E-Mail und nutze das Headerbild für Stimmung und Überschrift.

Ein breiter Cyber-Monday-E-Mail-Header mit blauem Farbverlauf und den Worten Nur heute, 25% Rabatt

Ein E-Mail-Header in 1200×600: das Angebot in der oberen Hälfte, wo es jedes Postfach zeigt.

- Betreffzeile und Header sollten dasselbe in denselben Worten sagen.
- Setze einen Button unter den Header, nicht fünf.
- Schreibe die Frist mit Zeitzone, besonders wenn du ins Ausland verkaufst.
- Prüfe den Header im Dark Mode, wo manche Postfächer die Farben darum herum ändern.

[E-Mail-Header gestalten](https://gradiently.design/de/guide/email-header-design) hat mehr zu Größen und Eigenheiten im Dark Mode.

## Posts und Stories für den Cyber Monday

In Social Media ist der Cyber Monday kurz, zwei oder drei Posts reichen also: ein Start am Morgen, eine Story-Erinnerung mittags und ein letzter Aufruf am Abend. Jeder sollte Leute zum Link schicken, lass in Stories also Platz für den Link-Sticker.

Ein Hochformat-Post zum Cyber-Monday-Sale mit elektroblauem Farbverlauf und dem Angebot in großer Schrift

Der Morgenpost: Anlass, Angebot und Frist.

Eine vertikale Story, die die letzten sechs Stunden eines Cyber-Monday-Sales herunterzählt

Die Abendstory, mit Platz darunter für den Link-Sticker.

| Grafik | Größe | Hinweis |
| --- | --- | --- |
| Instagram-Post | 1080×1350 | Start am Morgen |
| Story | 1080×1920 | Erinnerungen mit Link-Sticker |
| E-Mail-Header | 1200×600 | Angebot in der oberen Hälfte |
| Website-Hero | 1920×1080 | Wörter im mittleren Drittel |
| Linkvorschau | 1200×630 | Wird beim Teilen der Sale-Seite gezeigt |

Alles, was ein eintägiger Online-Sale braucht, in einem Look.

Mach all das in der Woche davor, nicht am Montagmorgen. Am Tag selbst willst du Bestellungen beobachten und Nachrichten beantworten, und die einzige Designänderung sollte sein, in der letzten Story „Noch sechs Stunden“ gegen „Noch eine Stunde“ zu tauschen.

> **Rechtzeitig abbauen** Wenn der Sale endet, entferne das Banner, stelle die Linkvorschau zurück und archiviere die Stories. Ein Cyber-Monday-Banner, das am Mittwoch noch läuft, lässt die Frist unecht wirken, und man glaubt der nächsten ein bisschen weniger.

Die Linkvorschau vergessen viele. Wenn jemand deine Sale-Seite teilt, ist dieses Bild die Grafik, die seine Freunde sehen, setze sie also für den Tag. [Open-Graph-Bildgröße](https://gradiently.design/de/guide/open-graph-image-size) zeigt, wie. Mit Pro passt Gradiently ein fertiges Design in einem Schritt an alle diese Formate an, und der Hintergrund hält in jeder Größe seine ruhigste Fläche hinter den Wörtern.

## FAQ

### Wann ist Cyber Monday?

Der Cyber Monday ist der Montag nach Thanksgiving in den USA und folgt also immer auf das Black-Friday-Wochenende. Viele Shops fahren ein Angebot von Freitag bis Montag und ändern für den letzten Tag den Look.

### Welche Farben eignen sich für Cyber-Monday-Grafiken?

Kühle, bildschirmartige Farben wie Elektroblau, Cyan und Violett auf fast schwarzem Grund wirken digital und setzen den Tag vom Black Friday ab.

### Welche Größe hat ein Cyber-Monday-E-Mail-Header?

1200×600 Pixel sind eine verlässliche Größe. Halte das Angebot in der oberen Hälfte, denn die sehen Leute auf dem Handy zuerst.

### Sollten Cyber-Monday-Grafiken zum Black Friday passen?

Behalte Schrift, Layout und Stimme, damit man dich erkennt, und ändere die Farbtemperatur, damit sich der neue Tag neu anfühlt.

### Was sollte ein Cyber-Monday-Website-Banner sagen?

Eine kurze Zeile mit Angebot und Frist, verlinkt auf die Sale-Seite. Ein Banner wird überflogen, nicht gelesen.
