Landingspagina ontwerpen: de opbouw die converteert

Goed landingspagina ontwerp is één doel, in de juiste volgorde beargumenteerd. Anders dan een homepage, die iedereen bedient, bestaat een landingspagina voor één bezoeker die vanaf één plek komt om één actie uit te voeren: de proefles boeken, op de wachtlijst komen, het aanbod claimen. De opbouw die steeds werkt: een heldere hero, het probleem in de woorden van de lezer, hoe het werkt, bewijs, de details van het aanbod, antwoorden op bezwaren en onderaan dezelfde call-to-action. Het ontwerp zorgt dat die volgorde moeiteloos te volgen is.

Eén pagina, één doel

Schrijf het doel in één zin op voordat je iets ontwerpt: “Eerste keer bezoekers van onze Instagram-advertentie een gratis kennismakingsles laten boeken.” Dan krijgt elke sectie een toets. Helpt dit die persoon deze stap te zetten? Zo niet, schrap het of verplaats het naar de hoofdsite.

Opbouw van een landingspagina, sectie voor sectie

1. 1

   Hero

   Kop met de belofte, één ondersteunende regel, één knop, één beeld. Hero-sectie ontwerpen behandelt dit scherm uitgebreid.

2. 2

   Het probleem

   Twee of drie zinnen over de situatie waarin de bezoeker zit, in zijn eigen woorden. Zo laat je zien dat je het begrijpt voordat je iets verkoopt.

3. 3

   Hoe het werkt

   Drie stappen, elk met een korte titel en een zin. Mensen besluiten makkelijker als ze zich het proces kunnen voorstellen.

4. 4

   Bewijs

   Echte getuigenissen met namen, foto’s van echt werk, logo’s van echte klanten of een korte demo. Nooit verzonnen.

5. 5

   Het aanbod in detail

   Wat ze precies krijgen, wanneer en wat het kost of juist niet. Duidelijke voorwaarden nemen twijfel weg.

6. 6

   Bezwaren

   Een korte FAQ met antwoorden op de redenen om niet te handelen: tijd, prijs, geschiktheid, opzeggen, wat er daarna gebeurt.

7. 7

   Afsluitende call-to-action

   Herhaal de belofte uit de kop en dezelfde knop. Bezoekers die tot het eind lezen zijn klaar; laat ze niet terugscrollen.

Niet elke pagina heeft elke sectie nodig. Een wachtlijst voor een lancering kan bestaan uit alleen een hero, drie regels over hoe het werkt en een e-mailveld. Een aanbod met veel commitment, zoals een cursus of een consult, heeft meestal alle zeven nodig en meer bewijs.

Een uitgewerkt voorbeeld: kennismaking bij een yogastudio

Laat de pagina aansluiten op de advertentie

De meeste bezoekers komen ergens vandaan: een Instagram-advertentie, een LinkedIn-advertentie, een e-mail, een QR-code op een flyer. Zodra ze landen, controleren ze of ze op de goede plek zijn. Herhaal het exacte aanbod uit de advertentie in de kop en neem de stijl over: dezelfde achtergrond, kleuren en letter. Een pagina die niets met de advertentie te maken lijkt, voelt als lokken en verwisselen, ook als dat niet zo is.

Als je beide uit één bron ontwerpt, gaat dit vanzelf. In Gradiently kun je met Pro één ontwerp in één stap naar alle formaten brengen, zodat post, story, e-mailheader en paginahero één Mark en één kop delen. Eén look, elk formaat laat de werkwijze zien en merkconsistentie legt uit waarom het ook buiten één campagne telt.

Ontwerpkeuzes die mensen laten doorscrollen

• Eén accentkleur voor alle knoppen, nergens anders gebruikt. Het oog leert waar te klikken. De 60-30-10-regel helpt om de balans te bepalen.
• Ruime ruimte tussen secties, zodat elke sectie als één idee leest. Volle pagina’s voelen als hard werken.
• Koppen die op zichzelf begrijpelijk zijn. Veel mensen scannen alleen de koppen; die moeten het hele verhaal vertellen.
• Echte foto’s boven stockbeelden. Je eigen ruimte, product, team of resultaten.
• Korte formulieren. Vraag alleen wat je nu nodig hebt. Een e-mailadres geef je makkelijker dan een telefoonnummer.
• Geen navigatiemenu, of alleen een logo, zodat er nergens iets te dwalen valt.

Eerst mobiel, dan testen

Verkeer vanuit social posts komt vooral op telefoons binnen, dus ontwerp eerst de versie van 390 pixels breed. Houd de kop en de knop op het eerste scherm, maak knoppen minstens 44 pixels hoog en gebruik alleen een plakkende knop als die geen inhoud bedekt.

Er bestaat geen universeel goed conversiepercentage; het hangt af van het aanbod, de prijs en het verkeer. Wat je altijd kunt doen is de volgende versie duidelijker maken dan de vorige. Voor de kleuren erachter lees je kleurenschema’s voor websites.