Cyber Monday-grafik: en look för rean som bara finns online

Den bästa Cyber Monday-grafiken ser omisskännligt digital ut och pekar någonstans: en kall, elektrisk palett på mörk botten, en kort rad och en länk. Cyber Monday är onlinereaan, så arbetet är inte bara sociala inlägg. Det är bannern över din webbplats, huvudet på mejlet som landar den morgonen och länkförhandsvisningen folk ser när de delar. Gör alla av en och samma look så känns dagen som en händelse snarare än en repris av fredagen.

Så skiljer sig Cyber Monday från Black Friday

Black Friday började som en dag i butik, och dess bilder lånar fortfarande från skyltfönster: varma färger, stora skyltar. Cyber Monday fick sitt namn efter näthandel, och det mesta av grafiken ses på en telefon en sekund innan någon trycker. Det ändrar tre saker.

Om du körde en Black Friday-serie, behåll typografin, layouten och rösten, och ändra temperaturen. Folk ska känna igen dig direkt och ändå se att något nytt har börjat. Black Friday-inlägg för sociala medier sätter upp den första halvan.

Cyber Monday-färger och paletter

Digitalt behöver inga kretskort, glitcheffekter eller binärkod i bakgrunden. Färgen klarar det själv. Ljus som verkar komma från en skärm, i blått, cyan eller violett, mot en djup bläckfärgad botten, läses som online direkt. Håll en accent och låt resten förbli mörkt.

Neon ser spännande ut på en mörk telefon och förfärligt ut när det vibrerar mot sig självt. Neongradienter går igenom hur du håller klara färger rena, och cyberpunkpaletter går längre om ditt varumärke kan bära det.

Cyber Monday-banner för din webbplats

En webbbanner läses på väg till något annat, så den får en kort rad och en deadline. Den tunna remsan ovanför navigeringen är den minst påträngande versionen och fungerar på varje sida. Här är en i vanlig CSS, med en reservfärg ifall gradienten inte laddas och text som förblir ljus på varje del av den.

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

För en hel hjältesektion i stället för en remsa, designa i 1920×1080 och håll orden i vänstra eller mittersta tredjedelen, där de överlever beskärning på mindre skärmar. Hjältebakgrunder för webbplatser går igenom storlekar och prestanda.

Cyber Monday-mejldesign

För många butiker är Cyber Monday-mejlet dagens viktigaste grafik. Huvudet är 1200×600, och på en telefon visar den första skärmen av ett mejl ofta inte mycket mer än det, så erbjudandet hör hemma i den övre halvan. Håll orden som levande text i mejlet där du kan, och använd huvudbilden för stämning och rubrik.

• Ämnesraden och huvudet ska säga samma sak med samma ord.
• Lägg en knapp under huvudet, inte fem.
• Skriv deadlinen med tidszon, särskilt om du säljer utomlands.
• Kolla huvudet i mörkt läge, där vissa inkorgar ändrar färgerna runt det.

Design av mejlhuvuden har mer om storlekar och egenheter i mörkt läge.

Cyber Monday-inlägg och stories

På sociala medier är Cyber Monday kort, så två eller tre inlägg räcker: en morgonlansering, en story-påminnelse mitt på dagen och ett sista tillfälle på kvällen. Var och en ska skicka folk till länken, så lämna plats i stories för länkdekalen.

Gör allt det här veckan innan, inte på måndag morgon. På dagen vill du följa ordrar och svara på meddelanden, och den enda designändring som ska vara kvar är att byta ”Sex timmar kvar” mot ”En timme kvar” på sista storyn.

Länkförhandsvisningen är den folk glömmer. När någon delar din reasida är den bilden grafiken deras vänner ser, så sätt den för dagen. Open Graph-bildstorlek visar hur. Med Pro ändrar Gradiently storlek på en färdig design till vart och ett av de här formaten i ett enda steg, och bakgrunden behåller sitt lugnaste område bakom orden i varje storlek.