# Cyber Monday -grafiikat verkkokaupan tarjouspäivään

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

Cyber Monday tapahtuu lähes kokonaan näytöillä, postilaatikoissa ja kassasivuilla. Sen grafiikoilla on eri tehtävä kuin Black Fridaylla, ja ne ansaitsevat oman viileämmän ilmeensä.

## The short version

- Cyber Monday -grafiikat toimivat parhaiten viileällä digitaalisella paletilla, joka liittyy selvästi Black Friday -ilmeeseesi mutta eroaa siitä näkyvästi.
- Cyber Monday on verkkotarjouspäivä, joten sivubanneri ja sähköpostiotsake ovat yhtä tärkeitä kuin somejulkaisut.
- Jokaisen Cyber Monday -grafiikan pitää johtaa yhteen toimintaan, yleensä linkkiin, ja kertoa selkeästi tarjouksen päättymisaika.
- Kapea sivubanneri tarvitsee yhden lyhyen rivin, sillä se nähdään alle sekunnissa matkalla muualle.
- Sähkönsininen, syaani ja violetti lähes mustalla pohjalla näyttävät digitaalisilta ilman virtapiirikuvioita tai häiriöefektejä.

Parhaat **Cyber Monday -grafiikat** näyttävät selvästi digitaalisilta ja ohjaavat jonnekin: viileä sähköinen paletti tummalla pohjalla, yksi lyhyt rivi ja linkki. Cyber Monday on verkkotarjouspäivä, joten työ ei rajoitu somejulkaisuihin. Tarvitset verkkosivun bannerin, aamulla saapuvan sähköpostin otsakkeen ja jaettaessa näkyvän linkkikuvan. Tee kaikki samalla ilmeellä, niin päivä tuntuu tapahtumalta perjantain toiston sijaan.

## Miten Cyber Monday eroaa Black Fridaysta

Black Friday alkoi myymälöiden tarjouspäivänä, ja sen ilme lainaa yhä näyteikkunoista: lämpimiä värejä ja suuria kylttejä. Cyber Monday sai nimensä verkko-ostamisesta. Sen grafiikka nähdään yleensä puhelimella sekunti ennen napautusta. Tämä muuttaa kolmea asiaa.

### Black Friday

- Lämpimät pohjat, kulta ja hehkuvat hiilet
- Rakentuu julkistuksen ympärille
- Syötejulkaisut ja tarinat etusijalla
- Voi kestää useita päiviä

### Cyber Monday

- Viileät pohjat, sähkönsininen ja syaani
- Rakentuu klikkauksen ympärille
- Sähköposti, sivubanneri ja linkkikuvat etusijalla
- Yleensä yksi päivä, joten kiire on todellinen

Jos teit Black Friday -sarjan, säilytä typografia, asettelu ja äänensävy mutta muuta värilämpötilaa. Ihmisten pitää tunnistaa sinut heti ja huomata silti uuden alkaminen. [Black Friday -somejulkaisut](https://gradiently.design/fi/guide/black-friday-post-ideas) valmistelee ensimmäisen osan.

## Cyber Monday -värit ja paletit

Digitaalinen ilme ei tarvitse virtapiirejä, häiriöefektejä tai binäärikoodia taustalle. Väri riittää. Syvää musteensävyn pohjaa vasten sininen, syaani tai violetti näytön kaltainen valo näyttää heti verkolta. Pidä yksi korostusväri ja jätä muu tummaksi.

- Näytön sininen: `radial-gradient(circle at 70% 25%, #38bdf8 0%, #0c4a6e 38%, #050b14 78%)`
- Syaani hohde: `radial-gradient(circle at 25% 70%, #22d3ee 0%, #164e63 40%, #04101a 80%)`
- Indigosta syaaniin: `linear-gradient(135deg, #0b1026 0%, #3730a3 50%, #22d3ee 100%)`
- Sähköinen violetti: `radial-gradient(circle at 80% 80%, #a855f7 0%, #3b0764 40%, #0a0614 80%)`

Neljä Cyber Monday -pohjaa. Jokainen yhdistää lähes mustan pohjan yhteen näytön valon väriin.

- Muste: #050b14
- Syvä sininen: #0c4a6e
- Näytön sininen: #38bdf8
- Jäinen teksti: #e0f2fe
- Perjantain kulta: #d4a24c

Black Fridaysta jatkava paletti: kultakorostus säilyy pienessä roolissa, mutta pohja muuttuu siniseksi.

Neon näyttää kiehtovalta tummalla puhelimella ja kamalalta, jos värit värisevät toisiaan vasten. [Neonliukuvärit](https://gradiently.design/fi/guide/neon-gradients) kertoo kirkkaiden värien hallinnasta. [Cyberpunk-väripaletit](https://gradiently.design/fi/guide/cyberpunk-colors) vievät ilmeen pidemmälle, jos brändisi kantaa sen.

## Cyber Monday -banneri verkkosivulle

Sivubanneri luetaan matkalla muualle, joten anna sille yksi lyhyt rivi ja määräaika. Ohut kaistale navigaation yläpuolella häiritsee vähiten ja toimii kaikilla sivuilla. Tässä sellainen tavallisella CSS:llä. Mukana on varaväri liukuvärin latausongelmiin ja teksti, joka pysyy vaaleana sen jokaisessa kohdassa.

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

Kapea ilmoituskaistale. Tummin väri on molemmissa päissä ja valo vain keskellä, joten vaalea teksti säilyttää kontrastinsa.

Jos teet kaistaleen sijaan kokonaisen pääosion, suunnittele koossa 1920×1080 ja pidä sanat vasemmassa tai keskimmäisessä kolmanneksessa. Näin ne säilyvät pienempien näyttöjen rajauksissa. [Verkkosivun pääosion taustat](https://gradiently.design/fi/guide/website-hero-background) käsittelee kokoa ja suorituskykyä.

## Cyber Monday -sähköpostin suunnittelu

Monessa kaupassa Cyber Monday -sähköposti on päivän tärkein grafiikka. Otsake on 1200×600, ja puhelimen ensimmäisessä näkymässä muuta näkyy usein vähän. Tarjous kuuluu siis sen yläpuoliskoon. Pidä sanat sähköpostissa oikeana tekstinä aina kun voit ja käytä otsakekuvaa tunnelmaan ja otsikkoon.

Leveä Cyber Monday -sähköpostiotsake sinisellä liukuvärillä ja tekstillä Vain tänään, 25 % alennus

Sähköpostiotsake koossa 1200×600: tarjous yläpuoliskossa, jossa jokainen postilaatikko näyttää sen.

- Aihekentän ja otsakkeen pitäisi sanoa sama asia samoilla sanoilla.
- Aseta otsakkeen alle yksi painike, älä viittä.
- Kirjoita määräaikaan aikavyöhyke, varsinkin jos myyt ulkomaille.
- Tarkista otsake tummassa tilassa, jossa osa postilaatikoista muuttaa ympäröiviä värejä.

[Sähköpostiotsakkeen suunnittelu](https://gradiently.design/fi/guide/email-header-design) kertoo lisää koosta ja tumman tilan erikoisuuksista.

## Cyber Monday -julkaisut ja tarinat

Cyber Monday on somessa lyhyt, joten kaksi tai kolme julkaisua riittää: aamun avaus, keskipäivän tarinamuistutus ja illan viimeinen kutsu. Jokaisen tulee ohjata linkkiin. Jätä siis tarinoihin tilaa linkkitarralle.

Pysty Cyber Monday -tarjousjulkaisu sähkönsinisellä liukuvärillä ja suurella tarjousotsikolla

Aamujulkaisu: tapahtuma, tarjous ja määräaika.

Pystytarina, joka laskee Cyber Monday -tarjouksen viimeisiä kuutta tuntia

Iltatarina, jonka alaosassa on tilaa linkkitarralle.

| Grafiikka | Koko | Huomio |
| --- | --- | --- |
| Instagram-julkaisu | 1080×1350 | Aamun avaus |
| Tarina | 1080×1920 | Muistutukset linkkitarran kanssa |
| Sähköpostiotsake | 1200×600 | Tarjous yläpuoliskossa |
| Verkkosivun pääosio | 1920×1080 | Sanat keskimmäisessä kolmanneksessa |
| Linkkikuva | 1200×630 | Näkyy tarjoussivua jaettaessa |

Kaikki yhden päivän verkkotarjouksen tarpeet samalla ilmeellä.

Tee nämä edellisellä viikolla, älä maanantaiaamuna. Itse päivänä haluat seurata tilauksia ja vastata viesteihin. Ainoaksi designmuutokseksi pitäisi jäädä viimeisen tarinan tekstin ”Kuusi tuntia jäljellä” vaihtaminen muotoon ”Yksi tunti jäljellä”.

> **Poista tarjous ajoissa** Kun tarjous päättyy, poista banneri, vaihda linkkikuva takaisin ja arkistoi tarinat. Keskiviikkona yhä näkyvä Cyber Monday -banneri saa määräajan näyttämään keksityltä. Ensi vuoden määräaikaa uskotaan silloin hieman vähemmän.

Linkkikuva unohtuu helposti. Kun joku jakaa tarjoussivusi, hänen ystävänsä näkevät juuri sen kuvan, joten aseta se päivää varten. [Open Graph -kuvan koko](https://gradiently.design/fi/guide/open-graph-image-size) näyttää miten. Gradiently Pro muuttaa yhden valmiin suunnitelman kaikkiin näihin muotoihin yhdellä kertaa. Tausta pitää rauhallisimman alueensa sanojen takana jokaisessa koossa.

## FAQ

### Milloin Cyber Monday on?

Cyber Monday on Yhdysvaltain kiitospäivää seuraava maanantai, joten se tulee aina Black Friday -viikonlopun jälkeen. Monet kaupat jatkavat samaa tarjousta perjantaista maanantaihin ja vaihtavat ilmeen viimeiseksi päiväksi.

### Mitkä värit sopivat Cyber Monday -grafiikoihin?

Viileät, näytön kaltaiset värit kuten sähkönsininen, syaani ja violetti lähes mustalla pohjalla näyttävät digitaalisilta ja erottavat päivän Black Fridaysta.

### Minkä kokoinen on Cyber Monday -sähköpostiotsake?

1200×600 pikseliä on luotettava koko. Pidä tarjous yläpuoliskossa, koska puhelimella se nähdään ensin.

### Pitäisikö Cyber Monday -grafiikoiden sopia Black Fridayhin?

Säilytä typografia, asettelu ja äänensävy tunnistettavuuden vuoksi. Muuta värilämpötilaa, jotta uusi päivä tuntuu uudelta.

### Mitä Cyber Monday -sivubannerin pitäisi sanoa?

Yksi lyhyt rivi tarjouksesta ja määräajasta, linkitettynä tarjoussivuun. Banneria vilkaistaan, ei lueta.