# App-Launch-Grafiken: Starte deine App überall zugleich

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

Am Launch-Tag wird deine App an einem einzigen Tag überall gezeigt, Menschen, die in einer Sekunde entscheiden, ob sie tippen. Hier sind das komplette Grafik-Kit, die Größen und die Reihenfolge, in der du sie erstellst.

## The short version

- App-Launch-Grafiken wirken am besten als ein Kit aus einem einzigen Design: Launch-Posts, ein Open-Graph-Bild, Profil-Header und Galeriebilder.
- Das Open-Graph-Bild, das beim Teilen deines Links erscheint, misst 1200×630 Pixel, der X-Header 1500×500.
- Launch-Posts sollten die App nennen, in einem Satz sagen, was sie tut, und zeigen, wo man sie bekommt.
- Aktualisiere Link-Vorschau, Header und Website-Hero, bevor du etwas postest, damit jeder Link, den Leute am Launch-Tag teilen, schon richtig aussieht.
- Ein einheitlicher Hintergrund über alle Launch-Grafiken hilft Menschen, dieselbe App zu erkennen, wenn sie in verschiedenen Feeds erscheint.

Gute **App-Launch-Grafiken** sind ein Design in vielen Formen: ein Ankündigungspost für jedes Netzwerk, eine Link-Vorschau in 1200×630, die bei jedem Teilen deiner URL erscheint, frische Profil-Header und ein kurzer Satz Galeriebilder für Launch-Seiten wie Product Hunt. Erstelle sie zusammen, aus einem Look und einem Satz, und der Launch-Tag wirkt wie ein einziges Ereignis statt wie ein Gerangel unpassender Screenshots.

## Beginne mit einem Satz und einem Look

Schreibe vor jeder Grafik den Satz, der sagt, was die App für wen tut, in unter zehn Worten. „Miete mit Mitbewohnern teilen, ohne das peinliche Gespräch“ funktioniert. „Die Zukunft gemeinsamer Finanzen“ nicht, weil sich niemand etwas darunter vorstellen kann. Dieser Satz kommt unverändert auf jede Grafik, sodass sich die Botschaft wiederholt, während die Form wechselt. [Texte für Visuals schreiben](https://gradiently.design/de/guide/writing-copy-for-visuals) erklärt mehr dazu, eine Zeile zu kürzen.

Lege dann den Look fest: Die Farben des App-Symbols werden zum Hintergrund, die Schrift der App zur Überschrift. Ein eigener Hintergrund zählt mehr, als du vielleicht denkst, denn dieselben Screenshots weißer Oberflächen erscheinen an jedem Launch-Tag. [Grafiken für den Launch-Tag](https://gradiently.design/de/guide/launch-day-graphics) behandelt das für jede Art Produkt.

- Nacht zu Signal: `linear-gradient(145deg, #0b1026 0%, #2b2f8f 50%, #6ee7f9 100%)`
- Glut: `radial-gradient(circle at 70% 30%, #ffd9a8 0%, #ff7a59 40%, #4a1532 100%)`
- Tiefes Mint: `linear-gradient(200deg, #e8fff4 0%, #7be0b3 45%, #0f5b4a 100%)`

Drei Launch-Hintergründe aus typischen Farben von App-Symbolen. Wähle den, der deinem Symbol am nächsten liegt, und behalte ihn für das ganze Kit.

## Das Kit für App-Launch-Grafiken mit Größen

| Grafik | Größe | Was darauf kommt |
| --- | --- | --- |
| Open-Graph-Link-Vorschau | 1200×630 px | App-Name, der Satz, Symbol |
| X-Header | 1500×500 px | Der Satz und „Jetzt verfügbar“ |
| Launch-Post auf X oder Bluesky | 1600×900 px | Hero-Screen oder der Satz |
| LinkedIn-Post | 1200×1200 px | Der Satz, Notiz der Macher |
| Instagram-Post | 1080×1350 px | Symbol, Name, der Satz |
| Story | 1080×1920 px | „Jetzt verfügbar“ und wo man sie bekommt |
| Website-Hero | 1920×1080 px | Der Satz und Store-Buttons |
| E-Mail-Header | 1200×600 px | Der Name und „Jetzt live“ |

Das Kernkit. Screenshots für App Store und Google Play haben eigene vorgeschriebene Größen, aufgelistet in der Entwicklerhilfe von Apple und Google. Product Hunt zeigt die aktuellen Anforderungen für Vorschaubild und Galerie im Einreichformular; gestalte sie im Querformat aus demselben Master.

- Link-Vorschau: 1200 × 630
- X-Header: 1500 × 500
- X-Post 16:9: 1600 × 900
- Instagram 4:5: 1080 × 1350
- Story 9:16: 1080 × 1920

Vom langen schmalen Header bis zur hohen Story, maßstabsgetreu. Die Worte müssen für jedes anders angeordnet werden, weshalb das Strecken eines Bildes nie funktioniert.

## Warum das Bild der Link-Vorschau am wichtigsten ist

Am Launch-Tag wird deine URL in Chats, Posts, Foren und Newsletter eingefügt, die du nie sehen wirst. Jeder davon zeigt dein **Open-Graph-Bild**, es ist also unauffällig die meistgesehene Launch-Grafik. Mach es 1200×630, setze App-Name und Satz in die Mitte, halte Text von den Rändern fern, weil manche Apps zu einem Quadrat zuschneiden, und prüfe es vor dem Launch mit einem Sharing-Debugger. [Open-Graph-Bildgröße](https://gradiently.design/de/guide/open-graph-image-size) zeigt die Zuschnitte; [Open-Graph-Tags](https://gradiently.design/de/guide/open-graph-tags) das Markup.

```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" />
```

Die Tags, die eine Link-Vorschau steuern. Nutze für das Bild eine absolute https-URL und ändere den Dateinamen beim Aktualisieren, damit Plattformen die neue Datei laden.

## So gestaltest du einen App-Launch-Post

Ein Launch-Post konkurriert mit allem anderen im Feed und sollte auf einen Blick lesbar sein. Beginne mit dem Satz, nicht mit dem Logo. Zeige einen Screen, nicht fünf. Sage, wo man die App bekommt. Auf X und Bluesky funktioniert ein Thread gut: zuerst die Grafik, dann ein kurzes Video, dann die Geschichte der Macher.

Ein Launch-Post im Querformat für eine App zum Mietteilen, mit der einzeiligen Beschreibung in großer Schrift

Der Post für X und Bluesky in 1600×900: Der Satz trägt den Post.

Eine vertikale Story mit dem Text Jetzt verfügbar für die App Rentwise auf passendem Verlauf

Die Story: zwei Worte und wohin, auf demselben Hintergrund.

### Vermeiden

- Ein Raster aus sechs Handy-Screenshots
- Irgendetwas „revolutionieren“
- Ein neues Farbschema nur für den Launch
- Text an den Rändern des Vorschaubilds

### Besser

- Ein Screen, der den Hauptmoment zeigt
- Der schlichte Satz dazu, was sie tut
- Die Farben des Symbols, überall
- Worte zentriert, mit großzügigen Rändern

Kurze Bildschirmaufnahmen passen gut zu Apps, weil sie den Hauptmoment in Bewegung zeigen: das Tippen, das Ergebnis. Halte sie unter zwanzig Sekunden, setze den Satz auf das erste Bild und füge Untertitel hinzu, da viele Menschen ohne Ton scrollen. [Produkt-Demovideo](https://gradiently.design/de/guide/product-demo-video) behandelt Tempo und Bildausschnitt.

## Die Reihenfolge, in der du App-Launch-Grafiken erstellst

1. **Eine Woche vorher: das Master-Design** Satz, Symbol, Hintergrund, Schrift in einem Querformat. Alles andere leitet sich daraus ab.
2. **Eine Woche vorher: ein Coming-soon-Post** Deute Datum und Link zur Warteliste an. [Coming-soon-Post](https://gradiently.design/de/guide/coming-soon-post) bietet Layouts.
3. **Zwei Tage vorher: Vorschauen und Header** Veröffentliche Open-Graph-Bild, X-Header und Website-Hero früh, damit am Tag geteilte Links richtig aussehen.
4. **Am Tag davor: alle Launch-Posts** Exportiere alle Größen und schreibe die Texte für jedes Netzwerk im Voraus.
5. **Launch-Tag: posten, antworten, wiederholen** Verbringe den Tag damit, Menschen zu antworten, nicht Grafiken zu machen.
6. **Eine Woche danach: ein Dankeschön** Ein Meilenstein- oder Dankeschön-Post im selben Look schließt den Launch ab.

Gradiently passt gut zu diesem Ablauf. Gestalte das Master einmal auf einem Mark und passe es dann mit Pro in einem Schritt an jedes Format des Kits an; der Mark hält den Satz auf jeder Form lesbar, indem er seinen ruhigsten Bereich hinter die Worte schiebt. Wenn du den Launch schon in ChatGPT oder Claude vorbereitest, lässt sich Gradiently mit beiden verbinden, sodass der Assistent das Kit als Designs entwerfen kann, die sich im Studio öffnen. [Launch-Grafiken für Indie Hacker](https://gradiently.design/de/guide/indie-hacker-launch-graphics) behandelt dasselbe Kit für Web-Produkte.

## FAQ

### Welche Grafiken brauche ich für einen App-Launch?

Eine Link-Vorschau in 1200×630, einen aktualisierten X-Header in 1500×500, Launch-Posts für jedes genutzte Netzwerk, eine Story, einen Website-Hero und Galeriebilder für jede Launch-Seite. Erstelle alle aus einem Master-Design.

### Welche Größe hat ein Product-Hunt-Galeriebild?

Product Hunt nennt die aktuellen Anforderungen für Vorschaubild und Galerie im Einreichformular. Gestalte sie im Querformat aus demselben Master wie deine anderen Launch-Grafiken, damit der Look einheitlich bleibt.

### Was sollte ein App-Launch-Post sagen?

Den Namen der App, einen Satz dazu, was sie für wen tut, und wo man sie bekommt. Alles andere gehört in die Beschreibung oder einen Thread.

### Wann sollte ich mein Bild für die Link-Vorschau aktualisieren?

Ein oder zwei Tage vor dem Launch, mit neuem Dateinamen, und teste es dann in einem Sharing-Debugger. Plattformen speichern Vorschauen zwischen, daher zeigt sich eine späte Änderung am Launch-Tag womöglich nicht.
