Cyber Monday -grafiikat verkkokaupan tarjouspäivään

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.

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

Neon näyttää kiehtovalta tummalla puhelimella ja kamalalta, jos värit värisevät toisiaan vasten. Neonliukuvärit kertoo kirkkaiden värien hallinnasta. Cyberpunk-väripaletit 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.

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

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

• 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 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.

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ä”.

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 näyttää miten. Gradiently Pro muuttaa yhden valmiin suunnitelman kaikkiin näihin muotoihin yhdellä kertaa. Tausta pitää rauhallisimman alueensa sanojen takana jokaisessa koossa.