Voorbeelden en template voor een landingspagina voor een mobiele app
Voorbeelden van landingspagina's voor mobiele apps
Landingspagina voor een mobiele app: live secties en badgeregels | We.Inc
Originele secties voor een landingspagina van een mobiele app die u live kunt bewerken: hero met telefoonmockup, functies, stappen en downloadband, met de officiële badgeregels van de App Store en Google Play.
Een landingspagina voor een app heeft één taak: de juiste mensen laten installeren. Begin met wat de app doet in één zin, toon hem in actie binnen een telefoonframe, en plaats de officiële badges van de App Store en Google Play bovenaan en nogmaals aan het einde. Volg de badgeregels van elke store voor formaat en witruimte.
Badgeregels van de stores in één oogopslag (gecontroleerd in oktober 2026)
Regel
App Store-badge
Google Play-badge
Tekst
Download in de App Store
Ontdek het op Google Play
Minimale hoogte op het scherm
40 px
28 px
Vrije ruimte eromheen
Een kwart van de badgehoogte
Een kwart van de badgehoogte
Naast andere badges
Plaats hem eerst; gebruik de zwarte badge
Even groot of groter dan de andere
Toegestane wijzigingen
Geen: niet aanpassen, kantelen of animeren
Geen: niet herkleuren of herschikken
De meeste overzichten van app-pagina's zijn galerijen met screenshots. Deze pagina geeft u de secties zelf in gewone HTML en CSS, gebouwd voor verzonnen apps, plus een kleine generator voor de hero. De plekken voor de badges zijn placeholders, omdat het echte beeldmateriaal van Apple en Google moet komen.
Typ uw appnaam, belofte in één regel en merkkleur in de herogenerator en kopieer de HTML.
Werk de voorbeeldsecties van boven naar beneden af: functies, hoe het werkt en de afsluitende downloadband.
Download de officiële badges van de marketingpagina's van Apple en Google en zet ze in de placeholders.
Link elke badge rechtstreeks naar uw vermelding in die store.
Zeg wat de app doet voordat u zegt hoe hij aanvoelt. Een zin als Deel huur en rekeningen met je huisgenoten wint van een slogan.
Toon echte schermen van de app in het telefoonframe. Nepdata is prima; verzonnen functies niet.
De richtlijnen van Apple vragen om maar één App Store-badge per layout, ondergeschikt aan de hoofdboodschap.
Overweeg op telefoons alleen de badge voor het platform van de bezoeker te tonen, want vanuit de andere store kan hij op zijn toestel niets installeren.
Voeg op desktop een klein blok met een QR-code toe, zodat bezoekers in één stap naar hun telefoon kunnen.
Veelgestelde vragen
Wat hoort er op een landingspagina voor een mobiele app?
Een kop van één zin die zegt wat de app doet, een telefoonmockup met een echt scherm, drie of vier functies geschreven als resultaten, een korte strook over hoe het werkt, de officiële storebadges en een link naar het privacybeleid. Een afsluitende downloadband herhaalt de badges.
Mag ik mijn eigen knop voor de App Store of Google Play maken?
Nee. Beide bedrijven vereisen hun officiële badge, ongewijzigd. Op de pagina van Apple staat dat u de badge niet mag aanpassen, kantelen of animeren, en op die van Google dat u de kleuren niet mag wijzigen of onderdelen niet mag herschikken. Download de bestanden uit hun marketingmateriaal.
Hoe groot moeten de storebadges zijn?
Apple stelt een minimale hoogte op het scherm van 40 pixels voor de App Store-badge, en Google 28 pixels voor de Google Play-badge. Als beide samen verschijnen, vraagt Google dat zijn badge even groot of groter is dan de andere badges.
Heb ik een website nodig als mijn app in de stores staat?
Op een pagina op uw eigen domein kunt u linken vanuit advertenties, e-mails en berichten op sociale media, uw privacybeleid hosten en in zoekmachines gevonden worden op wat de app doet. Vermeldingen in de stores alleen kunnen dat niet allemaal.
Een structuur die voor de meeste apps werkt
Bovenaan: kop, één ondersteunende regel, badges en de telefoonmockup. In het midden: functies als resultaten, daarna een strook van drie stappen over hoe het werkt. Onderaan: de badges opnieuw met een korte reden om vandaag te installeren.
Houd de pagina kort. Een bezoeker die heeft besloten, wil de badge, niet meer scrollen.
Badges en plaatsing
Beide stores vragen om vrije ruimte van een kwart van de badgehoogte rond het beeldmateriaal. Apple geeft de voorkeur aan de zwarte badge als er meerdere storebadges samen staan, en vraagt dat zijn badge als eerste komt.
Gebruik alt-tekst die overeenkomt met de tekst op de badge, zoals Download in de App Store, zodat gebruikers van een schermlezer horen waar de link naartoe gaat.
Secties voor een app-landingspagina om te kopiëren
Hero met telefoonmockup en badgeplekken
Een telefoonframe in alleen CSS naast de kop. Op smalle schermen zakt de telefoon onder de tekst.
Functies geschreven als resultaten
Elke kaart begint met wat de persoon krijgt, niet met de naam van de functie.
Hoe het werkt in drie stappen
Genummerde stappen laten de onboarding kort aanvoelen. Gebruik een geordende lijst zodat de volgorde wordt voorgelezen.
Afsluitende downloadband met QR-plek
Herhaalt de badges aan het einde. De QR-plek is voor desktopbezoekers die naar hun telefoon willen overstappen.
Scrollende strook met app-schermen
Een horizontale strook die binnen zijn eigen vak scrolt, zodat de pagina zelf nooit zijwaarts scrolt.
Checklist voor een app-landingspagina
Voordat u publiceert
Punt
Detail
Kop zegt wat de app doet
Eén eenvoudige zin
Echte schermen in de mockup
Geen functies die de app niet heeft
Officiële badges, ongewijzigd
Gedownload bij Apple en Google
Elke badge linkt naar de eigen storevermelding
Niet naar een algemene startpagina van de store
Alt-tekst van de badge komt overeen met de tekst erop
Voor gebruikers van een schermlezer
Privacybeleid gelinkt in de footer
Makkelijk te vinden voor bezoekers en beoordelaars
Badges herhaald aan het einde
Voor mensen die tot onderaan lezen
Herogenerator voor apps
Typ een kop, een ondersteunende regel en een schermkleur om een herosectie met een CSS-telefoonframe en twee badgeplekken te bouwen, en kopieer daarna de HTML.
Kop
Ondersteunende regel
Schermkleur
Plan je week in vijf minuten
Weekbird maakt van je takenlijst een rustig, realistisch schema.
Uw app-hero
Kopieer dit en vervang daarna de gestippelde plekken door de officiële badges.