# Grafik för applansering: visa din app överallt samtidigt

[Canonical HTML page](https://gradiently.design/sv/guide/mobile-app-launch-graphics)

Lanseringsdagen är den enda dag din app visas överallt på en gång, för folk som avgör på en sekund om de ska trycka. Här är hela paketet av grafik, storlekarna och i vilken ordning du gör dem.

## The short version

- Grafik för applansering fungerar bäst som ett paket gjort av en enda design: lanseringsinlägg, en Open Graph-bild, profilhuvuden och galleribilder.
- Open Graph-bilden som visas när din länk delas är 1200×630 pixlar, och X-huvudet är 1500×500.
- Lanseringsinlägg ska nämna appen, säga vad den gör i en mening och peka på var man får tag i den.
- Uppdatera din länkförhandsvisning, dina huvuden och webbplatsens hero innan du postar något, så att varje länk folk delar på lanseringsdagen redan ser rätt ut.
- En enhetlig bakgrund i all lanseringsgrafik hjälper folk att känna igen samma app när den dyker upp i olika flöden.

Bra **grafik för applansering** är en design i många former: ett tillkännagivande för varje nätverk, en länkförhandsvisning på 1200×630 som syns varje gång någon delar din URL, nya profilhuvuden och en kort uppsättning galleribilder för lanseringssajter som Product Hunt. Gör dem tillsammans, utifrån ett utseende och en mening, så läses lanseringsdagen som en enda händelse i stället för en röra av olikartade skärmdumpar.

## Börja med en mening och ett utseende

Skriv innan någon grafik meningen som säger vad appen gör för vem, på under tio ord. ”Dela hyran med kollegiekompisarna utan det pinsamma samtalet” fungerar. ”Framtidens gemensamma ekonomi” gör det inte, för ingen kan föreställa sig den. Den meningen hamnar oförändrad på all grafik, så att budskapet upprepas medan formen ändras. [Att skriva text för bilder](https://gradiently.design/sv/guide/writing-copy-for-visuals) har mer om hur du kortar en rad.

Fastställ sedan utseendet: appikonens färger blir bakgrund, appens typsnitt blir rubriken. En särpräglad bakgrund betyder mer än du kanske tror, eftersom samma skärmdumpar av vita gränssnitt dyker upp varje lanseringsdag. [Grafik för lanseringsdagen](https://gradiently.design/sv/guide/launch-day-graphics) tar upp det för alla slags produkter.

- Natt till signal: `linear-gradient(145deg, #0b1026 0%, #2b2f8f 50%, #6ee7f9 100%)`
- Glöd: `radial-gradient(circle at 70% 30%, #ffd9a8 0%, #ff7a59 40%, #4a1532 100%)`
- Djup mint: `linear-gradient(200deg, #e8fff4 0%, #7be0b3 45%, #0f5b4a 100%)`

Tre lanseringsbakgrunder byggda på typiska appikonfärger. Välj den som ligger närmast din ikon och behåll den genom hela paketet.

## Lanseringspaketet för appen, med storlekar

| Grafik | Storlek | Vad som ska på den |
| --- | --- | --- |
| Open Graph-länkförhandsvisning | 1200×630 px | Appens namn, meningen, ikonen |
| X-huvud | 1500×500 px | Meningen och ”Ute nu” |
| Lanseringsinlägg på X eller Bluesky | 1600×900 px | Huvudskärmen eller meningen |
| LinkedIn-inlägg | 1200×1200 px | Meningen, en hälsning från skaparen |
| Instagram-inlägg | 1080×1350 px | Ikon, namn, meningen |
| Story | 1080×1920 px | ”Ute nu” och var man hittar den |
| Webbplatsens hero | 1920×1080 px | Meningen och butiksknapparna |
| E-posthuvud | 1200×600 px | Namnet och ”Nu live” |

Grundpaketet. Skärmdumpar för App Store och Google Play har egna krav på storlek, som står i Apples och Googles utvecklarhjälp. Product Hunt visar sina aktuella krav för miniatyr och galleri i inlämningsformuläret; designa dem i liggande format utifrån samma original.

- Länkförhandsvisning: 1200 × 630
- X-huvud: 1500 × 500
- X-inlägg 16:9: 1600 × 900
- Instagram 4:5: 1080 × 1350
- Story 9:16: 1080 × 1920

Från ett långt smalt huvud till en hög story, skalenligt. Orden måste ordnas olika för varje, vilket är därför det aldrig fungerar att sträcka en bild.

## Därför är länkförhandsbilden viktigast

På lanseringsdagen klistras din URL in i chattar, inlägg, forum och nyhetsbrev som du aldrig kommer att se. Varje en av dem visar din **Open Graph-bild**, så den är i det tysta den mest sedda lanseringsgrafiken. Gör den 1200×630, lägg appens namn och meningen i mitten, håll texten borta från kanterna eftersom vissa appar beskär till en kvadrat och testa den med en delningsfelsökare före lanseringen. [Storlek på Open Graph-bild](https://gradiently.design/sv/guide/open-graph-image-size) har beskärningarna; [Open Graph-taggar](https://gradiently.design/sv/guide/open-graph-tags) har koden.

```html
<meta property="og:title" content="Rentwise: split rent without the awkward chat" />
<meta property="og:description" content="Now on iPhone and Android." />
<meta property="og:image" content="https://rentwise.app/og/launch.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
```

Taggarna som styr en länkförhandsvisning. Använd en absolut https-URL till bilden och byt filnamn när du uppdaterar den så att plattformarna hämtar den nya.

## Så designar du ett lanseringsinlägg för en app

Ett lanseringsinlägg konkurrerar med allt annat i flödet, så det ska gå att läsa i en blick. Börja med meningen, inte logotypen. Visa en skärm, inte fem. Säg var man får tag i appen. På X och Bluesky fungerar en tråd bra: grafiken först, sedan en kort film, sedan skaparens berättelse.

Ett liggande lanseringsinlägg för en app som delar hyra, med beskrivningen på en rad i stor text

Inlägget för X och Bluesky på 1600×900: meningen bär inlägget.

En stående story med texten Ute nu för appen Rentwise på den matchande gradienten

Storyn: två ord och vart man ska gå, på samma bakgrund.

### Undvik

- Ett rutnät med sex skärmdumpar av telefoner
- Att ”revolutionera” något
- Ett nytt färgschema bara för lanseringen
- Text längst ut i kanterna på förhandsbilden

### Gör så här

- En skärm som visar det viktigaste ögonblicket
- Den enkla meningen om vad den gör
- Ikonens egna färger, överallt
- Ord i mitten, med generösa marginaler

Korta skärminspelningar passar appar väl, eftersom de visar det viktigaste ögonblicket i rörelse: trycket, resultatet. Håll dem under tjugo sekunder, lägg meningen på första bilden och lägg till undertexter, eftersom många scrollar med ljudet av. [Produktdemofilm](https://gradiently.design/sv/guide/product-demo-video) tar upp tempo och bildutsnitt.

## I vilken ordning du gör lanseringsgrafiken

1. **En vecka före: originaldesignen** Mening, ikon, bakgrund och typsnitt på en liggande bild. Allt annat utgår från den.
2. **En vecka före: ett inlägg om att det snart kommer** Antyd datumet och en länk till väntelistan. [Inlägg om att något snart kommer](https://gradiently.design/sv/guide/coming-soon-post) har layouter.
3. **Två dagar före: förhandsvisningar och huvuden** Lägg ut Open Graph-bilden, X-huvudet och webbplatsens hero tidigt så att länkar som delas på dagen ser rätt ut.
4. **Dagen före: alla lanseringsinlägg** Exportera alla storlekar och skriv bildtexter för varje nätverk i förväg.
5. **Lanseringsdagen: posta, svara, upprepa** Ägna dagen åt att svara folk, inte åt att göra grafik.
6. **En vecka efter: ett tack** Ett milstolpe- eller tackinlägg i samma utseende avslutar lanseringen.

Gradiently passar det här arbetssättet väl. Designa originalet en gång på en Mark och ändra sedan, med Pro, storleken till alla format i paketet i ett steg; Marken håller meningen läsbar på varje form genom att flytta sin lugnaste yta bakom orden. Om du redan arbetar med lanseringen i ChatGPT eller Claude kan Gradiently kopplas till båda, så assistenten kan skissa paketet som designer som öppnas i Studio. [Grafik för indiehackares lanseringar](https://gradiently.design/sv/guide/indie-hacker-launch-graphics) tar upp samma paket för webbprodukter.

## FAQ

### Vilken grafik behöver jag för att lansera en app?

En länkförhandsvisning på 1200×630, ett uppdaterat X-huvud på 1500×500, lanseringsinlägg för varje nätverk du använder, en story, en webbplats-hero och galleribilder för varje lanseringssajt. Gör allt av en originaldesign.

### Vilken storlek har en galleribild på Product Hunt?

Product Hunt anger sina aktuella krav för miniatyr och galleri i inlämningsformuläret. Designa dem i liggande format utifrån samma original som din övriga lanseringsgrafik så att utseendet hålls enhetligt.

### Vad ska ett lanseringsinlägg för en app säga?

Appens namn, en mening om vad den gör för vem och var man får tag i den. Spara allt annat till bildtexten eller en tråd.

### När ska jag uppdatera min länkförhandsbild?

En eller två dagar före lanseringen, med ett nytt filnamn, och testa sedan i en delningsfelsökare. Plattformar sparar förhandsvisningar i cache, så en sen ändring syns kanske inte på lanseringsdagen.