Beispiele für App-Landingpages: Live-Abschnitte + Badge-Regeln | We.Inc
Eigene Abschnitte für Landingpages von Mobile Apps, die du live bearbeiten kannst: Hero mit Smartphone-Mockup, Features, Schritte und Download-Band, dazu die offiziellen Badge-Regeln von App Store und Google Play.
Eine App-Landingpage hat eine einzige Aufgabe: die richtigen Leute zur Installation zu bringen. Sag in einem Satz, was die App macht, zeige sie laufend in einem Smartphone-Rahmen und platziere die offiziellen Badges von App Store und Google Play weit oben und noch einmal am Ende. Halte dich bei Größe und Abständen an die Badge-Regeln des jeweiligen Stores.
Badge-Regeln der Stores im Überblick (geprüft im Oktober 2026)
Regel
App Store-Badge
Google Play-Badge
Wortlaut
Laden im App Store
Jetzt bei Google Play
Mindesthöhe auf dem Bildschirm
40 px
28 px
Freiraum drumherum
Ein Viertel der Badge-Höhe
Ein Viertel der Badge-Höhe
Neben anderen Badges
An erster Stelle platzieren, schwarzes Badge verwenden
Gleich groß oder größer als die anderen
Erlaubte Änderungen
Keine: nicht verändern, schräg stellen oder animieren
Keine: kein Umfärben, kein Umordnen
Die meisten Sammlungen von App-Seiten sind Galerien mit Screenshots. Diese Seite gibt dir die Abschnitte selbst in reinem HTML und CSS, gebaut für erfundene Apps, plus einen kleinen Generator für den Hero. Die Badge-Plätze sind Platzhalter, weil die echten Grafiken von Apple und Google kommen müssen.
Gib im Hero-Generator den Namen deiner App, ein Versprechen in einer Zeile und deine Markenfarbe ein und kopiere das HTML.
Arbeite dich durch die Beispielabschnitte: Features, So funktioniert's und das abschließende Download-Band.
Lade die offiziellen Badges von den Marketingseiten von Apple und Google herunter und setze sie in die Platzhalter ein.
Verlinke jedes Badge direkt mit deinem Eintrag im jeweiligen Store.
Sag, was die App macht, bevor du sagst, wie sie sich anfühlt. Ein Satz wie Teile Miete und Rechnungen mit deinen Mitbewohnern schlägt einen Slogan.
Zeige echte Screens der App im Smartphone-Rahmen. Beispieldaten sind in Ordnung, erfundene Features nicht.
Apples Richtlinien verlangen nur ein App Store-Badge pro Layout und wollen es der Hauptbotschaft untergeordnet sehen.
Auf Smartphones kannst du überlegen, nur das Badge für die Plattform des Besuchers zu zeigen, da sich aus dem anderen Store auf seinem Gerät nichts installieren lässt.
Füge auf dem Desktop einen kleinen QR-Code-Block hinzu, damit Besucher in einem Schritt zu ihrem Smartphone wechseln können.
Häufige Fragen
Was sollte eine Landingpage für eine Mobile App enthalten?
Eine Überschrift aus einem Satz, die sagt, was die App macht, ein Smartphone-Mockup mit einem echten Screen, drei oder vier Features als Ergebnisse formuliert, einen kurzen So-funktioniert's-Streifen, die offiziellen Store-Badges und einen Link zur Datenschutzerklärung. Ein abschließendes Download-Band wiederholt die Badges.
Kann ich meinen eigenen App Store- oder Google Play-Button gestalten?
Nein. Beide Unternehmen verlangen ihre offiziellen Badge-Grafiken, unverändert. Apples Seite sagt, dass das Badge nicht verändert, schräg gestellt oder animiert werden darf, und Googles Seite, dass Farben nicht geändert und Elemente nicht umgeordnet werden dürfen. Lade die Dateien aus ihren Marketing-Ressourcen herunter.
Wie groß sollten die Store-Badges sein?
Apple legt für das App Store-Badge eine Mindesthöhe von 40 Pixeln auf dem Bildschirm fest, Google für das Google Play-Badge 28 Pixel. Erscheinen beide zusammen, verlangt Google, dass sein Badge gleich groß oder größer als die anderen Badges ist.
Brauche ich eine Website, wenn meine App in den Stores ist?
Auf einer Seite unter deiner eigenen Domain kannst du aus Anzeigen, E-Mails und Social-Media-Beiträgen verlinken, deine Datenschutzerklärung hosten und in der Websuche für das ranken, was die App macht. Store-Einträge allein schaffen das nicht alles.
Eine Struktur, die für die meisten Apps funktioniert
Oben: Überschrift, eine unterstützende Zeile, Badges und das Smartphone-Mockup. Mitte: Features als Ergebnisse, danach ein So-funktioniert's-Streifen in drei Schritten. Unten: die Badges noch einmal mit einem kurzen Grund, die App noch heute zu installieren.
Halte die Seite kurz. Ein Besucher, der sich entschieden hat, will das Badge, nicht noch mehr Scrollen.
Badges und Platzierung
Beide Stores verlangen rund um die Grafik einen Freiraum von einem Viertel der Badge-Höhe. Apple bevorzugt das schwarze Badge, wenn mehrere Store-Badges zusammen erscheinen, und möchte, dass sein Badge an erster Stelle steht.
Verwende einen Alt-Text, der dem Wortlaut des Badges entspricht, etwa Laden im App Store, damit Screenreader-Nutzer hören, wohin der Link führt.
Abschnitte für App-Landingpages zum Kopieren
Hero mit Smartphone-Mockup und Badge-Plätzen
Ein Smartphone-Rahmen nur aus CSS neben der Überschrift. Auf schmalen Bildschirmen rutscht das Smartphone unter den Text.
Features als Ergebnisse formuliert
Jede Karte beginnt mit dem, was die Person bekommt, nicht mit dem Namen des Features.
So funktioniert's in drei Schritten
Nummerierte Schritte lassen das Onboarding kurz wirken. Verwende eine geordnete Liste, damit die Reihenfolge angesagt wird.
Abschließendes Download-Band mit QR-Platz
Wiederholt die Badges am Ende. Der QR-Platz ist für Desktop-Besucher gedacht, die zu ihrem Smartphone wechseln wollen.
Scrollender Streifen mit App-Screens
Ein horizontaler Streifen, der in seiner eigenen Box scrollt, damit die Seite selbst nie seitlich scrollt.
Checkliste für App-Landingpages
Vor dem Veröffentlichen
Punkt
Detail
Überschrift sagt, was die App macht
Ein einfacher Satz
Echte Screens im Mockup
Keine Features, die die App nicht hat
Offizielle Badges, unverändert
Von Apple und Google heruntergeladen
Jedes Badge verlinkt auf seinen Store-Eintrag
Nicht auf eine allgemeine Store-Startseite
Alt-Text des Badges entspricht seinem Wortlaut
Für Screenreader-Nutzer
Datenschutzerklärung im Footer verlinkt
Leicht zu finden für Besucher und Prüfer
Badges am Ende wiederholt
Für Leute, die bis unten lesen
App-Hero-Generator
Gib eine Überschrift, eine unterstützende Zeile und eine Bildschirmfarbe ein, um eine Hero-Section mit CSS-Smartphone-Rahmen und zwei Badge-Plätzen zu bauen, und kopiere dann das HTML.
Überschrift
Unterstützende Zeile
Bildschirmfarbe
Plane deine Woche in fünf Minuten
Weekbird macht aus deiner To-do-Liste einen ruhigen, realistischen Wochenplan.
Dein App-Hero
Kopiere das und ersetze dann die gestrichelten Plätze durch die offiziellen Badge-Grafiken.