Bannerdesign: banners för webb, sociala medier och tryck

Bra bannerdesign arbetar med formen i stället för mot den. En banner är bred och låg, så ge den ett enda kompakt block med ord, en kort rubrik och kanske en stödjande rad, placerat där inget kommer att täcka det, och låt bakgrunden bära färg över resten av bredden. Kontrollera varje plattforms storlek och säkra yta först: en LinkedIn-profilbanner är 1584 × 396 pixlar och förlorar sitt nedre vänstra hörn till din bild, medan en YouTube-banner är 2560 × 1440 och bara visar en central remsa på mobiler.

Bannerstorlekar för webb och sociala medier

Så lägger du ut ord i en bred banner

Folk läser en banner som de läser en textrad: från vänster till höger, snabbt. Sprids orden över hela bredden får ögat färdas för långt. Gruppera dem i ett block, ungefär en tredjedel av bredden, och sätt rubriken så stor att den går att läsa när hela bannern krymper till bredden av en mobilskärm.

Hierarkin måste vara enkel på den här höjden. Två nivåer är oftast gränsen: en rubrik och en liten rad ovanför eller under. Behöver du en tredje hör den troligen hemma på själva profilen. Visuell hierarki förklarar hur storlek och avstånd gör det jobbet utan extra dekoration.

Säkra ytor och beskärning

Varje plattform beskär eller täcker sin banner olika på dator och mobil. Det säkra tillvägagångssättet är detsamma överallt: låt bakgrunden löpa kant till kant och håll ord och logotyper inom mitten av bilden, bort från hörnet där avataren sitter.

1. 1

   Hitta det täckta hörnet

   På LinkedIn, X och Bluesky sitter profilbilden över nedre vänstra hörnet. Låt den ytan vara bara bakgrund.

2. 2

   Räkna med mobilbeskärning

   Facebook och Etsy trimmar sidorna på mobiler. Håll orden inom de centrala två tredjedelarna av bredden.

3. 3

   Använd YouTubes centrala remsa

   Av bilden på 2560 × 1440 syns bara mittområdet på ungefär 1546 × 423 pixlar på alla enheter. Lägg namnet och eventuella ord där.

4. 4

   Kontrollera i verklig storlek

   Ladda upp och titta sedan på en mobil och en bärbar dator. En förhandsvisning i ett designverktyg kan inte visa plattformens gränssnitt, och plattformar ändrar sina layouter, så kontrollera deras egna hjälpsidor före en stor lansering.

Tryckta banners: roll ups och eventskyltar

En roll up-banner, vanligen 850 × 2000 mm, är det motsatta problemet: hög och sedd från flera meters håll medan folk går förbi. Den behöver en logotyp och en rubrik i övre tredjedelen i ögonhöjd, mycket lite i nedre tredjedelen, som gömmer sig bakom bord och ben, och text som är stor nog att läsas tvärs över ett rum. Fråga tryckeriet vilken upplösning de vill ha; stora banners trycks normalt från filer långt under 300 dpi eftersom ingen ser dem på nära håll.

För montrar och scener, se design av eventbakgrunder, och för stora pappersformat, affischstorlekar.

Ett utseende över alla banners

De flesta behöver fem eller sex banners på en gång: LinkedIn, X, YouTube, ett mejlhuvud, en toppbild för webbplatsen. De ser ut som ett varumärke när bakgrund, typografi och färg är konstanta och bara layouten ändras. En gradient är idealisk för det eftersom den inte har något motiv att beskära, så länge den renderas för varje form i stället för att sträckas.

I Gradiently renderas en Mark på nytt i varje bannerstorlek, flyttar sitt lugnaste område bakom dina ord och låter Auto-bläck välja ljus eller mörk text per rad. Med Pro ändras en design till alla storlekar i ett steg, så att banners för LinkedIn, X och YouTube kommer tillsammans. Idén om en igenkännbar bakgrund tas upp i ett signaturutseende.