Cyber Monday-grafikk: et uttrykk for nettsalget

God Cyber Monday-grafikk virker tydelig digital og peker videre: en kjølig, elektrisk palett på mørk bunn, én kort linje og en lenke. Cyber Monday er nettsalget, så arbeidet handler om mer enn sosiale innlegg. Det er banneret på nettsiden, toppen i e-posten som kommer om morgenen, og lenkeforhåndsvisningen folk ser når de deler. Lag alle fra ett uttrykk, så oppleves dagen som en hendelse fremfor en gjentakelse av fredag.

Hvordan Cyber Monday skiller seg fra Black Friday

Black Friday startet som en butikkdag, og det visuelle låner fortsatt fra butikkvinduer: varme farger og store skilt. Cyber Monday fikk navn etter netthandel, og det meste av grafikken sees på telefonen et sekund før noen trykker. Det endrer tre ting.

Hvis du kjørte en Black Friday-serie, beholder du skriften, layouten og stemmen, men endrer temperaturen. Folk bør kjenne deg igjen med én gang og likevel se at noe nytt har startet. Black Friday-innlegg i sosiale medier setter opp den første halvdelen.

Cyber Monday-farger og paletter

Digitalt trenger ikke kretskort, glitch-effekter eller binærkode i bakgrunnen. Farge gjør det alene. Lys som ser ut til å komme fra en skjerm, i blått, cyan eller fiolett mot en dyp blekkbunn, oppleves straks som nettbasert. Behold én aksent og la resten være mørkt.

Neon ser spennende ut på en mørk telefon og fryktelig når fargene vibrerer mot hverandre. Neongradienter viser hvordan du holder klare farger rene, og cyberpunk-paletter går videre hvis merkevaren tåler det.

Cyber Monday-banner til nettsiden

Et nettbanner leses på vei til noe annet, så det får én kort linje og en frist. Den tynne stripen over navigasjonen er minst påtrengende og fungerer på alle sider. Her er en i ren CSS, med en reservefarge dersom gradienten ikke lastes, og tekst som forblir lys overalt.

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

For et helt toppfelt fremfor en stripe designer du på 1920×1080 og holder ordene i venstre eller midtre tredel, der de tåler beskjæring på mindre skjermer. Bakgrunner til nettsidens toppfelt dekker størrelse og ytelse.

Cyber Monday-e-postdesign

For mange butikker er Cyber Monday-e-posten dagens viktigste grafikk. Toppbildet er 1200×600, og på telefon viser det første skjermbildet ofte lite mer enn dette. Tilbudet hører derfor hjemme i øvre halvdel. Behold ordene som ekte tekst i e-posten der du kan, og bruk toppbildet til stemning og overskrift.

• Emnefelt og toppbilde bør si det samme med de samme ordene.
• Sett én knapp under toppbildet, ikke fem.
• Skriv fristen med tidssone, særlig hvis du selger utenlands.
• Kontroller toppbildet i mørk modus, der noen innbokser endrer fargene rundt det.

Design av e-posttoppbilder har mer om størrelser og særegenheter i mørk modus.

Cyber Monday-innlegg og storyer

I sosiale medier er Cyber Monday kort, så to eller tre innlegg holder: en morgenlansering, en storypåminnelse midt på dagen og en siste oppfordring om kvelden. Hvert bør sende folk til lenken. La derfor det være plass til lenkemerket i storyer.

Lag alt dette uken før, ikke mandag morgen. På selve dagen vil du følge bestillingene og svare på meldinger. Den eneste designendringen som gjenstår, bør være å bytte «Seks timer igjen» med «Én time igjen» på siste story.

Lenkeforhåndsvisningen er den folk glemmer. Når noen deler salgssiden, er det dette bildet vennene ser. Sett det derfor for dagen. Open Graph-bildestørrelse viser hvordan. Med Pro endrer Gradiently ett ferdig design til alle disse formatene i ett steg, og bakgrunnen holder det roligste området bak ordene i hver størrelse.