Het ontwerp van de startpagina (of startpagina) is het visuele en structurele ontwerp van de eerste pagina van een website die bezoekers zien wanneer ze de site voor het eerst bezoeken. De startpagina speelt een sleutelrol bij het creëren van de eerste indruk van de site en helpt bezoekers de informatie te vinden die ze nodig hebben of verder door de bron te navigeren.
1. Ontwerp van Shopify-startpagina
Net als veel van de andere landingspagina's in dit bericht, de voorbeeldbestemmingspagina Shopify maakt het eenvoudig. De op de gebruiker gerichte kop bestaat bijvoorbeeld uit slechts een paar woorden, en de pagina is gebaseerd op eenvoudige opsommingen in plaats van alinea's om de details en voordelen van de proef over te brengen. Er zijn slechts een paar velden die moeten worden ingevuld voordat u begint. Dit alles maakt het voor u gemakkelijker om online te verkopen met behulp van uw tool.
2. Ontwerp van de startpagina van de snuit
Bestemmingspagina's helpen gebruikers beslissen of uw product of dienst hun kostbare tijd en energie waard is. Wat is een betere manier om uw waardepropositie duidelijk en direct te communiceren dan door uw bezoekers te matchen met het probleem dat uw app oplost?
Instagram-reacties krijgen meer
SnuitEen Mac-app die meldingen op het scherm dempt, dekt dit volledig af laten zien zonder te vertellen mentaliteit op hun minimale landingspagina. Bezoekers van deze pagina worden begroet door een snel vuur van ongemakkelijke meldingen in de linkerbovenhoek van het scherm. De animatie is niet alleen leuk, maar brengt ook op overtuigende wijze het nut van de applicatie over zonder lange beschrijvingen.
3. TransferWise-startpagina-ontwerp
TransferWise Hiermee kunt u geld in meerdere valuta's verzenden en ontvangen, en op de onderstaande landingspagina wordt elke afzonderlijke actie opgesplitst, zodat u niet wordt afgeleid door opties die niet op u van toepassing zijn.
Als u geld wilt overmaken, kunt u het overboekingsformulier invullen. Om geld te ontvangen, gaat u eenvoudigweg naar het middelste tabblad en om u aan te melden voor TransferWise met uw bankpas, gaat u naar het uiterst rechtse tabblad.
Elk tabblad op deze landingspagina maakt zijn eigen tabblad oproep tot actie afhankelijk van waarvoor u zich aanmeldt - elk met een heldergroen kader om uw volgende stap na drie mogelijke startpunten te markeren.
4. Ontwerp van Airbnb-startpagina
Om bezoekers te helpen omzetten in hosts, Airbnb biedt een aantal verleidelijke personalisatie: een ruwe schatting van de gemiddelde inkomsten op basis van uw locatie. U kunt aanvullende informatie over uw mogelijke plaatsing in de velden invoeren om een nog persoonlijkere beoordeling te krijgen.
Als je al een pagina hebt bezocht waar je overtuigd van bent, zorgt een duidelijke call-to-action bovenaan de pagina ervoor dat je gemakkelijk ter plekke kunt converteren.
5. Teambit
eigenzinnig is meestal niet het eerste woord dat in je opkomt als je aan HR-software denkt, maar de visuele landingspagina van Teambit is precies dat. Een eenvoudig formulier met één veld wordt vergezeld door een schattig kantoor vol dierlijke karakters - allemaal zeer blij met Teambit, als je geïnteresseerd bent. Naast elk informatiegedeelte van de landingspagina verschijnt een cartoondier, waardoor bezoekers naar beneden scrollen voor meer informatie. Ontwerp van de startpagina
Bestemmingspagina Teambit is een goed bewijs dat je geen “leuk” product of dienst nodig hebt om een grappige landingspagina te maken.
6. Ontwerp van Wistia-startpagina
Allereerst is dit de landingspagina Wistia voor hun gratis Wistia-account. Meteen valt het formulier op met één veld om een account aan te maken – de blauwe achtergrond met minimaal ontwerp contrasteert mooi met het helderwitte formulierveld.
De lengte van het formulierveld in combinatie met de prominente plaatsing elimineert vrijwel alle wrijving bij het aanmaken van een account... maar als u twijfelt, kunt u altijd naar beneden scrollen om de FAQ te lezen. Door de twee te scheiden met een sterk kleurcontrast, maakt Wistia het conversieproces veel eenvoudiger.
7. Webstroom. Ontwerp van de startpagina
Webflow, een ontwerptool voor webontwikkelaars, verpakt veel informatie in een GIF en drie formuliervelden. Het zou leuk zijn om het volledige registratieformulier op één regel te hebben. Niet alleen wordt de pagina hierdoor korter, maar door elk veld van links naar rechts in te vullen, kunnen gebruikers zien hoe dicht ze bij het klikken op de vierde blauwe knop zijn en gratis aan de slag kunnen gaan.
De geanimeerde GIF onder het formulier wordt in hetzelfde frame op de website weergegeven, zodat gebruikers kunnen zien hoe het product werkt. и registreer zonder te scrollen of naar een nieuwe pagina te gaan.
Ontwerp van de startpagina van e-books
8. Ontwerp van de Nauto-startpagina
Nauto, een dataplatform voor zelfrijdende auto's, helpt autonoom rijden veiliger te maken voor bedrijven die wagenparken beheren. Uiteraard hebben zijn klanten alle informatie nodig om op dit platform te kunnen verkopen. Nauto heeft het super simpel e-boek, waarvan de landingspagina u een kort contactformulier en voorbeeldstatistieken geeft om te bewijzen waarom deze bron zo belangrijk is.
De groene knop "Nu downloaden" kan zelfs expres zijn geweest (groen betekent immers "go").
Scroll naar beneden en je ziet nog een CTA 'Get eBook' om gebruikers eraan te herinneren wat ze te wachten staan. U ziet ook drie schokkende statistieken over auto-ongelukken om gebruikers aan te moedigen meer te leren. Bekijk het hieronder.
9. Industrieel sterk marketing-startpagina-ontwerp
Deze landingspagina trekt me meteen aan met zijn onweerstaanbare, pittige kop: “Don’t Make Me Zoom.” Dit spreekt rechtstreeks aan op de algemene ervaring die de meesten van ons hebben als we door onze telefoons of tablets scrollen - en het is ook een beetje brutaal.
Maar dat is niet het enige waardoor ik geïnteresseerd raakte in deze landingspagina. Merk op hoe de rode kleur strategisch bovenaan en onderaan het formulier is geplaatst, waardoor u nog dichter bij de conversiegebeurtenis komt.
Bovendien is dit ontwerp meta: het ziet er geweldig uit en werkt geweldig mobiele toestellen. Houd er rekening mee dat veel bezoekers uw landingspagina's bezoeken op hun smartphones of tablets ontwerp van uw website niet bij hen past, geven ze het misschien op en verlaten ze uw pagina.
Marketingspecialisten van Industrial Strength hebben het veld gemaakt lettertypen en formulieren die groot genoeg zijn zodat bezoekers bijvoorbeeld niet hoeven in te zoomen om de inhoud te lezen en ermee te communiceren.
10. Velaro Livechat
Soms maken de kleinste details het grootste verschil. Zij zijn bijvoorbeeld degenen die de landingspagina maken Velaro Livechat verbazingwekkend.
Dat kleine PDF-symbool boven de itemafbeelding helpt bepalen in welk formaat de download zal zijn. Een pijl vóór de ondertitel helpt de belangrijke tekst die bezoekers willen lezen verder te benadrukken. Net als IMPACT hebben ze ook een automatisch aangevinkt selectievakje voor abonnementen naar de nieuwsbrief op hun formulier - wat, als het wordt omgezet in een extra selectievakje, een geweldige manier is om het aantal abonnees te vergroten. Al deze kleine, ogenschijnlijk onbelangrijke details dragen bij aan een solide, verbazingwekkend ontwerp van de bestemmingspagina. Ontwerp van de startpagina
11. IMPACT Branding en ontwerp / Ontwerp van de startpagina
Startpagina IMPACT zijn al lang een bron van inspiratie voor ontwerpers. Ik ben dol op de eenvoudige pagina-indeling, van de grote titelkopie en de gedetailleerde afbeelding, tot de omtrek rond de vorm, tot de kleuren en lettertypen die zeer aangenaam zijn voor het oog.
De gratis handleiding die IMPACT hier downloadt, markeert ook niet de download zelf in de blauwe knop waarmee u het ingevulde formulier kunt verzenden. In plaats daarvan nodigt IMPACT u uit om “meer conversies te genereren” door u te concentreren op wat u kunt winnen door de gids te lezen.
Landingspagina's voor meer informatie
12. Unbounce
Niet verrassend, de Unbounce staat bovenaan deze lijst - zij hebben echt het boek geschreven over het maken van landingspagina's met een hoge conversie. Hoewel er veel verbazingwekkende dingen zijn aan deze landingspagina, zijn er twee die ik erg leuk vind: 1) het gebruik van een chatbox in plaats van een klassiek formulier, en 2) de gedetailleerde - maar goed verpakte - informatie onder het formulier/Home Pagina-ontwerp
De eerste helpt de aandacht te vestigen op het doel van de pagina (het invullen van een formulier) op een manier die onopvallend is en niet als een hele klus aanvoelt. De tweede geeft die pagina een SEO-boost (zoekmachines hebben meer inhoud om te crawlen) en neemt de angst weg bij mensen die meer moeten weten over een stukje inhoud voordat ze hun informatie indienen, zonder mensen af te leiden van het chatvenster.
13. Bills.com. Ontwerp van de startpagina
Mensen beschouwen landingspagina's vaak als statische pagina's op uw website. Maar met de juiste tools kun je ze interactief en gepersonaliseerd maken.
Neem het onderstaande voorbeeld met Bills.com. Om erachter te komen of u baat zou hebben bij hun consultatie, beantwoordt u drie vragen voordat u het formulier te zien krijgt. Het begint hiermee:
Vervolgens beantwoord je nog twee vragen, zoals die hieronder:
En hier is het laatste landingspaginaformulier waarin u uw gegevens invult:
Ik weet niet zeker hoe het algoritme werkt (en of er überhaupt een is), maar terwijl ik het aan het invullen was, maakte ik me zorgen over geen kwalificaties. Toen ik eenmaal wist wat ik deed, was ik enthousiast om het formulier in te vullen, waarvan ik zeker weet dat de meeste mensen die schulden hebben en deze tool gebruiken, dit doen. Door deze aanbieding exclusiever te maken voordat het formulier op de landingspagina verschijnt, wed ik dat Bills.com dat aanzienlijk zal doen verhoogde conversie.
14. Ontwerp van Trulia-startpagina
Trulia deed iets dat erg leek op Bills.com met zijn landingspagina. Het begint met een eenvoudig formulier waarin om "adres" wordt gevraagd (wat minder griezelig klinkt dan "uw adres", hoewel ze dat wel bedoelen). Onder dit eenvoudige formulierveld bevindt zich een feloranje knop die goed contrasteert met de karakterafbeelding achter het formulier en benadrukt dat de offerte voor uw huis wordt gepersonaliseerd.
Uiteraard is het adres op zichzelf niet voldoende om de waarde van de woning in te schatten. Het geeft eenvoudigweg de omgeving van het huis aan. Daarom staan op de volgende pagina aanvullende vragen over de woning zelf, zoals het aantal bedden en badkamers. Hieronder ziet u een kopie van "Vertel ons waar we het rapport naartoe moeten sturen" - met de disclaimer dat u door het invoeren van deze informatie ermee instemt contact op te nemen met de makelaar. Dit is een goed voorbeeld van hoe een bedrijf zijn bezoekers vanaf het allereerste begin waardeert, terwijl het tegelijkertijd de verwachtingen van bezoekers schept over wat er als resultaat zal gebeuren.
15. Ontwerp van de startpagina van Landbot
landbot, een dienst die op chatbots gebaseerde landingspagina's maakt, plaatst zijn eigen product in het midden van zijn op chat gebaseerde landingspagina. Bezoekers worden begroet door een vriendelijke bot, compleet met emoji's en GIF's, die hen aanmoedigt informatie te verstrekken in een conversatieformaat in plaats van in de traditionele vorm.
16. Webwinsten
Voor een beetje contrast... hoe zit het met lange landingspagina's? Met slechts een paar trucjes kunt u zelfs de langste landingspagina kort laten lijken. Op de onderstaande landingspagina van Webprofits ziet u hoe u dit kunt doen. Ontwerp van de startpagina
Er is rechtsboven een prominente CTA-knop voor meer informatie - met een goed contrast op de achtergrond om deze te laten opvallen, en een pijl-omlaag om scrollen aan te moedigen. Door het formulierveld niet vooraan te plaatsen, helpen ze de wrijving te verminderen en geven ze bezoekers de kans om meer te leren voordat ze een conversieoptie te zien krijgen.
Ze laten je ook begrijpen wat er werkelijk is делает Webprofits . Op de rest van de pagina vindt u details over wat u ontvangt als u uw gegevens indient. Bovendien bevat het strategische CTA's waarmee u terug naar boven kunt navigeren om het formulier in te vullen, zoals 'Let's Talk'.
17. H.BLOOM
Soms moet je gewoon even stoppen en een landingspagina bewonderen hoe mooi deze is. Bij gebruik van een foto met hoge resolutie en veel witruimte op de landingspagina H.BLOOM leuk om naar te kijken.
Naast zijn schoonheid heeft de pagina een aantal geweldige conversie-elementen: een overheadformulier, een duidelijke en beknopte beschrijving van wat er zal gebeuren als u het formulier invult, en zelfs een feloranje knop 'Verzenden'. Het enige dat we zullen veranderen? Kopiëren via de knop Verzenden – Dit kan specifieker zijn voor het voorstel dat wordt aangeboden. Ontwerp van de startpagina
18. Conversielab
Hoewel ik geen voorbeeldformulierpost zou opnemen in een bericht over landingspagina's, is deze site speciaal. Beginpagina is de gehele site - de navigatielinks brengen u eenvoudigweg naar de onderstaande informatie. Ontwerp van de startpagina
Wanneer u op 'Hulp bij bestemmingspagina's' klikt, wordt de hele site verplaatst om ruimte te maken voor het formulier. Zo ziet het eruit voordat u klikt:
En als u op die CTA klikt, kijk dan eens hoe het formulier eruit ziet:
Ik vind het leuk dat je de pagina niet hoeft te verlaten om het formulier in te vullen, maar het formulier zal niet opdringerig zijn voor gewone sitebezoekers.
Ideeën/Homepagina-ontwerp
Een goed geoptimaliseerde startpagina kan van klanten leads maken door informatie vast te leggen waarmee u uw bezoekers beter kunt begrijpen, promoten en verrassen. Omdat landingspagina's essentieel zijn voor conversies, is het belangrijk ervoor te zorgen dat ze goed worden gepland, ontworpen en uitgevoerd. Hier zijn een paar dingen waarmee u rekening moet houden bij het maken van gericht pagina's:Aantrekkelijke esthetiek: alleen de kleur van uw landingspagina en een duidelijke gebruikersinterface kunnen helpen. Bezoekers willen meer weten over uw producten en bewijs zien van de waarde die u biedt. Kijk eens naar nummer 10 op onze lijst, Inbound Emotion, voor een goed voorbeeld van een geweldige webpagina.
Minder is meer: laat de zin of afbeeldingen het meeste aan het woord doen, maar zorg ervoor dat u alle beschrijvende koppen en ondersteunende tekst opneemt om uw bestemmingspagina duidelijk en aantrekkelijk te maken. Dit geldt voor vrijwel elk onderdeel op de pagina: witruimte, eenvoudige kopie en kortere formulieren.
Ontwerp van de startpagina
Houd bezoekers op de pagina: Door de hoofdnavigatie of eventuele afleidende backlinks te verwijderen, is de kans kleiner dat er enige vorm van leadgeneratie-frictie ontstaat die ertoe kan leiden dat bezoekers uw pagina verlaten.
Delen op sociale netwerken. Een gemakkelijke manier om bezoekers naar uw landingspagina te trekken, is door deelknoppen in te zettensociaal netwerk, zodat ze uw inhoud kunnen verspreiden onder hun volgers op sociale media. Klanten vormen immers het middelpunt van uw marketingvliegwiel.
A/B-testen: Landingspagina's zijn belangrijk om goed te presteren, en aangezien de consumentenpsychologie soms verrassend kan zijn, is het altijd het beste om met verschillende versies van uw pagina's te experimenteren om te zien welke de hoogste conversieratio (CVR) heeft. Controleer de positionering van de aanbieding, de soorten CTA’s of zelfs het kleurenschema.
Call-to-Action: CTA, waar het vlees op de landingspagina staat, of het keerpunt, waar het vooruitzicht om contacten te worden is. CTA's kunnen bezoekers vragen zich te abonneren, te downloaden, een formulier in te vullen en te delen sociaal netwerk etc., maar over het algemeen zijn CTA’s nodig om uw publiek actiever bij uw aanbod te betrekken. Om leads te genereren moeten CTA’s gedurfd en boeiend zijn, maar het allerbelangrijkste: ze moeten op een effectieve manier waarde overbrengen.
Laat een reactie achter