Venngage

Vi ska vara ärliga, det är svårt att göra om dina landningssidor. Men att skapa landningssidor från grunden är ännu svårare.

Vilken typ av landningssidor passar bäst för din bransch? Vilken typ av landningssida ska du skapa för ett specifikt användningsfall? Hur uppnår du den känsliga balansen mellan bra landningssidedesign och text?

Lita på mig, jag har varit där och jag har haft samma frågor. Det som har hjälpt mig mest i sådana här situationer är att titta utåt för att få inspiration.

I den här guiden kommer vi att dela med oss av några av de bästa exemplen på landningssidor som vi har hittat på nätet och som sträcker sig över flera olika branscher och användningsområden.

Här är vad den här guiden kommer att täcka (klicka för att hoppa vidare):

1. Exempel på landningssidor för programvara
2. Exempel på landningssidor för produkter
3. Exempel på landningssidor för e-handel
4. Exempel på landningssidor för appar
5. Exempel på landningssidor för kommande produkter
6. Exempel på landningssidor för kommande produkter
7. Konsult- och byrålandningssidor exempel
8. Landningssidor för böcker exempel

Vi har också strött in några av våra landningssidemallar så att du kan börja med att skapa dina egna landningssidor direkt!

Söker du inspiration för att krydda din omdesign av landningssidor? Då har du kommit till rätt ställe.

Hur använder du våra mallar för landningssidor?

Det finns många sätt att använda våra mallar för landningssidor. Här är tre av dem:

1. Mockup för din egen landningssida: Att kommunicera hur dina landningssidor ska se ut med designers eller ingenjörer kan vara svårt om du inte skapar en mockup för landningssidor för att visualisera och kommunicera dina idéer.
2. Skaffa finansiering för ditt nystartade företag: Din startup kanske inte har en hemsida ännu, men det betyder inte att du inte kan samla in pengar. En egengjord landningssidemockup som ingår i ditt investerardäck kan ge liv åt din idé och övertyga investerare om att stödja dig.
3. Vinn nya kunder för din byrå: Vill du avsluta fler affärer och göra mer försäljning? Fokusera på att visa, inte berätta. Anpassa en mall för en landningssida för att visa kunderna hur deras nya landningssida kan se ut om de samarbetar med dig. Bifoga den till ditt förslag eller din affärspitch.

Den här landningssidan för e-handel är till exempel optimerad för att driva försäljning och kan användas som en mockup för din slutliga landningssida:

Skapa den här mallen

Det här är dock bara ett användningsområde. Du kan också skapa landningssidor för att:

• Konvertera webbplatsbesökare till att registrera provversioner av din programvara.
• Övertyga besökare att ladda ner din mobilapp.
• Sälja dina digitala och fysiska produkter på nätet.
• Validera en ny affärsidé innan du bestämmer dig för att satsa fullt ut.
• Generera nya leads för din byrå eller konsultverksamhet.

Låt oss dyka in direkt.

Exempel på landningssidor för mjukvara

Stripe landningssidor för mjukvara

När det gäller landningssidor för mjukvara har jag blivit förbluffad av Stripes nyligen genomförda omdesign av landningssidor.

Stripe är ett av de största nystartade företagen inom finansiella tjänster på den här planeten som är stolt över att kunna tre saker mycket väl: ekonomi, teknik och design.

Och deras förkärlek för bra design och användarupplevelse återspeglas på den här programvarans landningssida:

Källa

För att vara helt objektiv har deras landningssidedesign många tjusiga klockor och visselpipor.

Jag talar om gradientanimationen som kan påverka sidans hastighet och batteri, dålig läsbarhet av texten, otydlig och liten call-to-action (CTA) etc.

Dina landningssidor för mjukvara bör hålla sig borta från alla klockor och visselpipor. Mitt råd? Håll det enkelt.

Monday sign up landing page

På temat att hålla det enkelt har minimalistisk landningssidedesign hittills varit en av de mest populära grafiska designtrenderna 2020.

Vem är bättre att visa upp som exempel än Monday? Deras landningssida för registrering är ren, minimalistisk och lätt att se:

Källa

Bonuspoäng för de röda CTA:erna som är svåra att missa och de automatiskt rullande användningsfallen i hjälteavsnittet som visar alla de sätt på vilka team och avdelningar kan använda Monday.

Venngage-mall för landningssidor för mjukvara

Om du är som jag och gillade hur Monday tog sig an utformningen av sina landningssidor har jag en liknande mall för landningssidor för mjukvara åt dig.

Mjukvarans landningssida nedan är organiserad, minimalistisk och lättläst. Perfekt om du är ett nystartat företag som erbjuder en enkel och lättanvänd programvara.

Gå vidare och redigera den här mallen för programvarans landningssida nu:

Skapa den här mallen

Exempel på landningssidor för produkter

TransferWise interaktiva landningssida

Ett annat företag inom finansiella tjänster på den här listan? Vad kan jag säga, Transferwises sätt att ta sig an den traditionella produktlandningssidan var för bra för att ignoreras.

Transferwise har snabbt blivit ett av de enklaste sätten att skicka och ta emot pengar utomlands och deras exempel på en interaktiv produktlandningssida är det som gjorde mig till kund också:

Källa

Det går egentligen inte att göra fel med en levande valutakalkylator som fungerar i båda riktningarna och som visar upp både omvandlingsfördelningen och avgifterna på ett enkelt sätt.

Den bästa? Deras produktlandningssida har flera CTAs som syftar till att antingen utbilda dig, etablera förtroende och trovärdighet, och viktigast av allt: locka dig att registrera dig.

Om du redan är övertygad är allt du behöver göra att klicka på ”kom igång”. Vill du veta mer? Klicka på knappen ”se vad vi handlar om” så visas en förklaringsvideo.

I slutändan är deras mål att omvandla okända besökare till register. Så den stora, feta och gröna CTA-adressen står alltid i centrum.

Som jag sa tidigare rekommenderar jag att du håller dina produktlandningssidor enkla.

Dina resurser kan spenderas bättre någon annanstans (till exempel på att ta reda på din strategi för marknadsföring online). Särskilt om du är ett litet till medelstort företag eller precis har börjat.

Astra produktlandningssida

Jag har stött på många exempel på produktlandningssidor under min tid som marknadsförare, men jag råkade nyligen snubbla över Astras landningssida. Jag visste genast att detta var den bästa produktlandningssidan jag sett på länge.

Men varför? Till att börja med är deras rubrik fascinerande och samtidigt inriktad på ett problem som alla webbplatsägare har. Deras följande underrubrik målar upp ett ”vad händer om”-scenario som ytterligare upprör denna smärta.

Astra avslutar med en CTA som positionerar dem som en lösning som syftar till att hjälpa alla webbplatsägare att säkra sin webbplats på tre minuter som är både hyperspecifika och tidsbundna.

Inte bara det, men de har också gjort ett bra jobb med att lista de största företagen som använder Astra för att försäkra potentiella kunder om att de är i gott sällskap:

Källa

Venngage produktlandningssidemall

Här är en riktig produktlandningssidemall som våra designers kom fram till och som du kan pyssla med och anpassa efter eget tycke.

Denna landningssidemall har alla standardelement som hjälteavsnittet, hur det fungerar, flera CTA:er och sociala bevis i form av kundreferenser.

Om du säljer någon form av mjukvara eller fysisk produkt är den här mångsidiga landningssidemallen ditt bästa tips:

Skapa den här mallen

Pro tips: Är du orolig för att din landningssidedesign inte ska se likadan ut? Med vår My Brand Kit-funktion kan du tillämpa ditt företags varumärke på alla dina designer (inklusive våra landningssidor) direkt. Importera dina varumärkesfärger, logotyper och typsnitt och applicera dem på vilken design som helst med ett enda klick. Så enkelt är det. Läs mer om Brand Kit här.

Exempel på landningssidor för e-handel

Caspers landningssida för e-handel

Ett annat exempel på landningssidedesign som gjorts på rätt sätt kommer från madrassen Casper.

Överskriften innehåller ett djärvt påstående som gör att besökaren blir direkt intresserad, det unika säljarförslaget är lockande och användandet av populära mediehus som socialt bevis ger trovärdighet åt deras erbjudande.

En enkel struktur, elegant design och övertygande budskap gör Caspers landningssidedesign till en av de bästa i e-handelsbranschen:

Källa

Pro tips: Om du vill öka landningssidekonverteringarna, använd sociala bevis till din fördel. Har du varit med i TIME Magazine? Har du fått entusiastiska vittnesmål från inflytelserika personer? Har du fått ett 5/5-betyg från kunderna? Visa upp dem på din landningssida.

Dollar Shave Club viral landningssida

Ett företag som är känt för sin geniala marknadsföring som backas upp av en no-nonsense-attityd, är det svårt att debattera den monumentala framgången för Dollar Shave Clubs produktlansering.

Som ganska enkel när det gäller design jämfört med de flesta exempel på landningssidor för e-handel, bidrog denna landningssida tillsammans med deras virala video till att Dollar Shave Club fick cirka 12 000 nya kunder på bara 48 timmar.

Tala om att bli viral.

Men även om den virala videons humor och autenticitet gjorde det tunga arbetet, gör den här landningssidan för e-handel allting rätt – från att sätta fingret på försäljningspropositionen till den briljanta användningen av sociala bevis:

Källa

Nästan ett decennium och ett förvärv senare har moderbolaget Unilever valt att gå den traditionella vägen för en landningssida för e-handel med Dollar Shave Club:

Källa

Venngage-mall för landningssidor för e-handel

Inspirerade av exemplen på landningssidor för e-handel ovan har vi också skapat en mall för landningssidor som du kan leka med just nu.

Den här mallen för landningssidor för e-handel som jag delade tidigare har en snygg hjälteavdelning med en kontrasterande CTA, ett enkelt försäljningsförslag i tre punkter och sociala bevis i form av omnämnanden i media och kundrecensioner:

Skapa den här mallen

Exempel på landningssidor för appar

Landningssidor för Hopper-appen

Hopper är en populär reseapp med en användarupplevelse i appen som är den bästa jag någonsin haft.

Men låt oss hålla oss till ämnet landningssidor här. Hoppers applandningssida är enkel, lättläst och fylld av lekfulla ikoner, drömska illustrationer och minimal användning av text.

Det mest unika med den här mobilapplandningssidan är att oavsett om du använder webbläsaren på din dator eller din smartphone, omdirigerar de dig alltid med en länk för att ladda ner deras mobilapp.

Och när jag upplevde deras mobilapp för första gången förstod jag deras resonemang:

Källa

AnyList mobile app landing page

Om du har varit uppmärksam kommer du att märka att många landningssidor för mobilappar tenderar att vara minimalistiska till sin natur, både när det gäller innehåll och text.

Den största anledningen till detta är enkel: dina besökare söker förmodligen efter din mobilapp på sina mobila enheter. Med begränsad skärmyta måste du se till att varje ord räknas.

Loppislistappen AnyList överkomplicerar inte saker och ting utan följer istället den traditionella designen för applandningssidor på ett mycket bra sätt.

Minimal text (ofta några få rader som mest), en högupplöst bild av appen i aktion följt av nedladdningslänkar till apparna – det kan verkligen inte bli mer enkelt än så här.

AnyList är ett bevis på att när det gäller applandningssidor kan tråkigt ibland vara bättre:

Källa

Mall för applandningssidor från Venngage

För att hjälpa dig att förverkliga din appidé har vi skapat egna mallar för applandningssidor för mobiler internt, baserade på de applandningssidedesigns som vi har sett på hela internet.

För att börja med är den här mallen för landningssidor för mobilappar utrustad med tjusiga men visuellt fängslande illustrationer samt flera men strategiskt utspridda CTA:

Skapa den här mallen

Företräcker du något mycket mer grundläggande? Våra designers har till och med skapat en version av en applandningssida som innehåller rubrik, beskrivning, appbild och nedladdningslänkar:

Skapa det här mallen

Exempel på kommande landningssidor

Playdate kommande landningssidor

Komande landningssidor är perfekta för att tillkännage en ny produkt eller tjänst som du arbetar med. De är också praktiska för att validera nya affärsidéer.

Panic Inc. använde en coming soon-landningssida för sin nya produkt. Deras mål? Att skapa en surrning kring lanseringen av deras nya handhållna spelkonsol: Playdate.

Det här är inte den traditionella landningssidestrukturen som du har sett upprepas hittills i det här inlägget. Fokus för den här coming soon-landningssidan är innehållet.

Det påminner mig om ett långt försäljningsbrev. Den viktigaste skillnaden i Playdates fall är att det känns mer som en konversation och mindre som ett försäljningsbrev.

Och med snygg landningssidedesign, vackra produktbilder och en enkel CTA för att bli underrättad när de lanseras är det svårt att debattera vad all hype handlar om:

Källa

Brainfood pre-launch app landningssida

Här finns mer designinspiration till kommande landningssidor för dig. Den kommer från de smarta hjärnorna bakom Brainfood.

Ovanför fållan fokuserar Brainfood på endast tre element:

• Rubrik: Skarp och lättförståelig säljsats. Utan modeord.
• Hjältebild: Visa upp appen i praktiken med en förklarande video.
• CTA: Inbjudan till att registrera sig.

Om du som jag gillar att hålla saker och ting enkla är jag säker på att du kommer att uppskatta den här designen för kommande landningssidor:

Källa

Venngage-mall för kommande landningssidor

Som jag sa ovan är det så att om ditt mål är att validera en ny affärsidé eller att skapa uppmärksamhet kring en ny produkt eller tjänst, så är kommande landningssidor det bästa valet.

Den bästa delen? Eftersom de vanligtvis ligger precis ovanför fold, är det ganska enkelt och okomplicerat att skapa dem.

Om du försöker få igång ditt nystartade företag skulle det vara klokt att validera din nystartade idé först. Annars kan det sluta med att du skapar något som ingen vill ha.

Här är en mall för en startsida för startupföretag som kommer snart som du kan använda för att validera om din idé om att starta ett nytt företag är ett ja eller nej:

Skapa den här mallen

Anmäler du en ny produkt eller tjänst? Använd en landningssida för kommande produkter för att bygga upp en stor publik innan du lanserar den. Även om det är en reseblogg som du har varit så ivrig att lansera:

Skapa det här mallen

Exempel på landningssidor för konsulter och byråer

Rob Sobers blogglandningssida

Av det stora antalet personliga blogglandningssidor som finns där ute kommer den som jag med största sannolikhet kommer att stjäla för mig själv att komma från marknadsföringskonsulten Rob Sobers. Ledsen, Rob.

När du besöker hans webbplats möts du av en enkel startsida. Det finns inga flashiga klockor eller visselpipor och denna ”mindre är mer”-strategi lyser igenom både i webbplatsens innehåll och design.

En text som är annorlunda men ändå slående, en enkel CTA för att gå med i hans nyhetsbrev och ett lågt navigeringsfält är det som jag gillar mest med det här exemplet på en landningssida:

Källa

Pro tips: Om du är en konsult som Rob, så är det definitivt till stor hjälp att blogga och skriva nyhetsbrev. Jag skulle också rekommendera att du experimenterar med några kundreferenser och fallstudier som visar upp eventuella tidigare kundvinster. Du kan också erbjuda fallstudier som en gratis nedladdning till webbplatsbesökare i utbyte mot deras e-post. Mer om ledningsgenerering senare.

Shortlist agency landing page

Som jag har en naturlig förkärlek för marknadsföringsinriktade landningssidor tror jag att du håller med mig när jag säger att Shortlists omdesignade landningssida ser bättre ut än de flesta exemplen på försäljningslandningssidor som finns där ute.

Från ett designperspektiv är det dämpade färgpaletter, kreativ användning av färggradienter och färgglada illustrationer som poppar upp som jag gillar med den här landningssidan från byrån:

Källa

Från en marknadsföringsvinkel är jag också ett fan av deras kreativa säljtexter, den djärva röda CTA:n och sociala bevis i form av märken som de har arbetat med.

Slutsatsen? Optimera varje enskilt element i designen av din landningssida och du kommer att få en försäljningslandningssida som kommer att övertyga de flesta besökare att trycka på den stora röda ”låt oss prata!”-knappen.

Venngage mall för landningssidor för byråer

Om du vill generera leads för din byrå eller ditt konsultföretag behöver du en landningssida för byråer som inte bara konverterar, utan som också uppnår en balans mellan design och text.

Du har tur, för här är en mall för en landningssida för försäljning som uppfyller alla krav:

Skapa den här mallen

Den här mallen för en landningssida för försäljning skiljer sig från andra eftersom den ber potentiella kunder om sina kontaktuppgifter på förhand, ger en övertygande anledning att göra det och innehåller även ett telefonnummer så att potentiella kunder kan komma i direkt kontakt med dig om de har frågor.

Exempel på landningssidor för böcker

Unbounce landningssida för e-böcker

Om det finns ett företag på den här planeten som förstår sig på bra landningssidedesign så är det våra vänner på Unbounce.

Av de många landningssidor som jag har sett från Unbounce är den här landningssidan för e-böcker klar och tydlig och kommunicerar allt du behöver veta om deras e-bok och varför du bör ladda ner den:

Källa

Med den här landningssidan för insamling av e-post har Unbounce ett enkelt mål: att generera högkvalificerade leads genom att erbjuda besökare som besöker sidan för första gången en gratis e-bok, i stället för att försöka konvertera dem till kunder redan första gången (vilket sällan fungerar).

Marknadsföring för utvecklare landningssida för e-böcker

I detta exempel på landningssida älskar jag hur Justin erbjuder två versioner av sin digitala produkt: en e-bok och en onlinekurs för att tilltala både läsare och tittare i sin målgrupp.

Den enkla designen, den långa säljtexten och de riktiga kundomdömena gör den här landningssidan lättläst, övertygande och autentisk.

Inte bara det, i sin förklaringsvideo förklarar Justin kortfattat allt om programmet kortfattat genom att först visa upp smärtpunkten och sedan positionera sitt program som en lösning.

Och även om detta inte strikt är ett exempel på en landningssida för e-böcker, följer det den standarddesign för landningssidor för e-böcker som jag är alltför bekant med:

Källa

Den riktiga kicken: Justin är så säker på sitt program att han erbjuder ett gratis kapitel från sin ebook så att förstagångsbesökare kan uppleva en del av hans program innan de fattar ett köpbeslut.

Detta hjälper också Justin konvertera skeptiska köpare till potentiella leads som han kan erbjuda äkta värde till först innan han ber om en försäljning. Snacka om en win-win.

Venngage email capture landing page template

Som tidigare påpekats kan du generera leads på fler sätt än ett. Och processen är ganska likartad oavsett om du är en byrå, konsult eller programvaruföretag.

Om du känner dig överväldigad eller förvirrad rekommenderar jag att du börjar i liten skala. Skapa en e-bok och erbjud den som en leadmagnet på din landningssida för e-postinsamling för att börja generera leads.

Här är en enkel mall för en landningssida för e-böcker för att komma igång:

Skapa den här mallen

När du har fått en känsla för hur e-böcker hjälper till med att generera leads, kan du börja pyssla med andra former av lead magnets som vitböcker, infografik och checklistor.

Identifiera vilken typ av erbjudande som ger mest gensvar hos din målgrupp innan du börjar optimera din landningssida. Till exempel kan en Fortune 500-chef vara mer intresserad av ett vitboksdokument än en checklista.

Pro tips: e-böcker, vitböcker och checklistor är bra ledningsmagneter eftersom de är lätta att skapa. Om du kan spendera lite tid och resurser rekommenderar jag också att du experimenterar med att skapa ett nyhetsbrev eller en djupgående branschrapport för att generera leads av högre kvalitet. Känner du dig äventyrlig? Prova att vara värd för ett webbseminarium.

Din tur att skapa dina bästa landningssidor hittills

Grattis, du har tagit dig till slutet av den här guiden. Nu har du en gedigen förståelse för de bästa exemplen på landningssidor som brukar fungera för olika branscher och specifika användningsfall.

Som jag har sagt är nyckeln till att skapa landningssidor som konverterar främst att få innehåll och design rätt. Först då kommer konverteringarna att följa med.

Hur du gör din webbplats REALER

– Slät > Pretentiös
– Ansikten > Illustrationer
– Sociala bevis vid varje tillfälle pic.twitter.com/gO4tY3LQQWz

– Marketing Examples (@GoodMarketingHQ) July 16, 2020

För att skapa din landningssida ska du komma ihåg följande tips:

• Keep it simple, stupid (KISS): De bästa landningssidorna som konverterar är lätta för ögonen och lätta att läsa.
• Använd sociala bevis: Nya besökare måste lita på dig innan de köper. Eliminera deras skepticism genom att visa upp omnämnanden i media, citat från influencers och vittnesmål från kunder precis som dem.
• Prata som en människa: Mindre ”The AI Visitor Conversion Platform” och mer ”How Small Brands Sell More Online” Din text ska tala som en människa skulle göra.
• Upprepa dig inte (DRY): Landningssidor har begränsad yta, använd den klokt. Skärp dig på ditt budskap och upprepa dig inte för att se till att du kommunicerar värdet av ditt erbjudande på ett effektivt sätt.
• A/B-tester allt: A/B-tester dina landningssidor ofta för att identifiera vad som fungerar bäst. Testa enskilda element som design, text, försäljningsförslag, CTA:er, sociala bevis, och gå vidare därifrån.

Slutligt: Glöm inte att använda testverktyg för olika webbläsare för att se till att dina landningssidor är kompatibla med några av de mest populära webbläsarna och operativsystemen.

Nu när du vet hur du kan göra en egen landningssida eller ge dina befintliga landningssidor en visuell ansiktslyftning, är det dags att vidta åtgärder.

Skapa en landningssida!

Vill du veta mer? Här finns mer innehåll om marknadsföring och design, handplockat för dig:

7 tips för att använda visuellt material för att skapa landningssidor som konverterar

20+ fantastiska mallar för e-böcker + designtips för nybörjare

Websidemarknadsföring för småföretag: Den ultimata guiden