Hjemmeside (eller startside) design er det visuelle og strukturelle design af den første side på et websted, som besøgende ser, når de besøger webstedet første gang. Hjemmesiden spiller en nøglerolle i at skabe det første indtryk af webstedet og hjælper besøgende med at finde den information, de har brug for, eller navigere videre gennem ressourcen.
1. Shopify-hjemmesidedesign
Ligesom mange af de andre landingssider i dette indlæg, er prøvelandingssiden Shopify gør det enkelt. For eksempel er den brugerfokuserede overskrift kun nogle få ord, og siden er afhængig af simple punkttegn frem for afsnit for at formidle detaljerne og fordelene ved forsøget. Der er kun få felter, der skal udfyldes, før du begynder. Alt dette gør det nemmere for dig at sælge online ved hjælp af dit værktøj.
2. Næseparti Hjemmeside Design
Landingssider hjælper brugerne med at beslutte, om dit produkt eller din tjeneste er deres værdifulde tid og energi værd. Hvilken bedre måde at kommunikere dit værdiforslag klart og direkte på end ved at matche dine besøgende med selve det problem, din app løser?
Instagram-kommentarer bliver flere
NæsepartiEn Mac-app, der dæmper meddelelser på skærmen fuldstændigt, dækker dette vise uden at fortælle mentalitet på deres minimale landingsside. Besøgende på denne side bliver mødt af en hurtig ild af akavede meddelelser i øverste venstre hjørne af skærmen. Animationen er ikke kun sjov, men formidler også overbevisende anvendeligheden af applikationen uden lange beskrivelser.
3. TransferWise-hjemmesidedesign
TransferWise lader dig sende og modtage penge i flere valutaer, og dens landingsside, vist nedenfor, opdeler hver enkelt handling, så du ikke bliver distraheret af muligheder, der ikke gælder for dig.
Hvis du vil sende penge, kan du udfylde overførselsformularen. For at modtage penge skal du blot gå til den midterste fane og for at tilmelde dig TransferWise ved hjælp af dit betalingskort, gå til fanen yderst til højre.
Hver fane på denne landingsside opretter sin egen opfordring til handling afhængig af hvad du tilmelder dig - hver med en lys grøn ramme for at fremhæve dit næste trin efter tre mulige udgangspunkter.
4. Airbnb-hjemmesidedesign
For at hjælpe med at konvertere besøgende til værter, Airbnb tilbyder nogle fristende personalisering: et groft skøn over den gennemsnitlige indtjening baseret på din placering. Du kan indtaste yderligere oplysninger om din potentielle placering i felterne for at få en endnu mere personlig vurdering.
Hvis du allerede har besøgt en side, du er overbevist om, gør en tydelig opfordring til handling øverst på siden det nemt at konvertere på stedet.
5.Teambit
finurlige er normalt ikke det første ord, der kommer til at tænke på, når du tænker på HR-software, men Teambits visuelle landingsside er netop det. En simpel formular med ét felt er ledsaget af et yndigt kontor fyldt med dyrefigurer - dem alle meget glad for Teambit, hvis du er interesseret. Et tegneseriedyr vises ud for hver informationssektion på landingssiden, hvilket lokker besøgende til at rulle ned for at lære mere. Hjemmeside design
landingsside Teambit er et godt bevis på, at du ikke behøver at have et “sjovt” produkt eller en service for at skabe en sjov landingsside.
6. Wistia Hjemmeside Design
Først og fremmest er dette landingssiden Wistia for deres gratis Wistia-konto. Med det samme bemærker du formularen med ét felt for at oprette en konto - den blå baggrund med minimalt design står i flot kontrast til det lyse hvide formularfelt.
Længden af formularfeltet kombineret med fremtrædende placering eliminerer næsten al friktion, når du opretter en konto... men hvis du er i tvivl, kan du altid rulle nedenunder for at læse FAQ. Ved at adskille de to med en stærk farvekontrast gør Wistia konverteringsprocessen meget lettere.
7. Webflow. Hjemmeside design
Webflow, et designværktøj til webudviklere, pakker en masse information ind i en GIF og tre formularfelter. Det ville være rart at have hele registreringsformularen på én linje - ikke kun gør det siden kortere, men udfyldning af hvert felt fra venstre mod højre viser brugerne, hvor tæt de er på at klikke på den fjerde blå knap og komme i gang gratis.
Den animerede GIF under formularen vises i samme ramme på hjemmesiden, så brugerne kan se, hvordan produktet fungerer. и tilmeld dig uden at scrolle eller gå til en ny side.
E-bogs hjemmeside design
8. Nauto Hjemmeside Design
Nauto, en selvkørende bildataplatform, hjælper med at gøre autonom kørsel mere sikker for virksomheder, der administrerer flåder. Naturligvis vil hans kunder have brug for al information for at sælge på denne platform. Nauto har det super simpelt e-bog, hvis landingsside giver dig en kort kontaktformular og forhåndsvisning af statistik for at bevise, hvorfor denne ressource er så vigtig.
Den grønne "Download Now"-knap kan endda have været med vilje (grøn betyder trods alt "gå").
Rul ned, og du vil se en anden "Få e-bog" CTA for at minde brugerne om, hvad der er i vente. Du vil også se tre rystende bilulykkesstatistikker for at opmuntre brugerne til at lære mere. Tjek det ud nedenfor.
9. Industriel Stærk Marketing Hjemmeside Design
Denne landingsside tiltrækker mig straks med sin uimodståelige, slagkraftige overskrift: "Lad mig ikke zoome." Dette taler direkte til den generelle oplevelse, de fleste af os har, når vi scroller gennem vores telefoner eller tablets – og det er også lidt fræk.
Men det er ikke det eneste, der fik mig til at interessere mig for denne landingsside. Læg mærke til, hvordan den røde farve er strategisk placeret i toppen og bunden af formularen, hvilket trækker dig endnu tættere på konverteringsbegivenheden.
Også dette design er meta til at starte: det ser ud og fungerer godt på mobile enheder. Husk, at mange besøgende vil få adgang til dine landingssider på deres smartphones eller tablets, og hvis design af din hjemmeside ikke passer dem, kan de give op og forlade din side.
Industrial Strength Marketing specialister gjorde feltet skrifttyper og former, der er store nok til, at besøgende ikke skal for eksempel zoome for at læse og interagere med indholdet.
10. Velaro Live Chat
Nogle gange gør de mindste detaljer den største forskel. Det er for eksempel dem, der laver landingssiden Velaro Live Chat fantastiske.
Det lille PDF-symbol over elementbilledet hjælper med at bestemme, hvilket format download skal være i. En pil før underoverskriften hjælper yderligere med at henlede opmærksomheden på den vigtige kopi, som besøgende ønsker at læse. Ligesom IMPACT har de også et automatisk markeret afkrydsningsfelt for abonnementer til nyhedsbrevet på deres formular - hvilket, hvis det bliver til et ekstra afkrydsningsfelt, er en fantastisk måde at øge dit antal abonnenter på. Alle disse små, tilsyneladende ubetydelige detaljer hjælper med at tilføje et solidt, fantastisk design af destinationssiden. Hjemmeside design
11. IMPACT Branding og design / Hjemmesidedesign
Hjemmeside IMPACT har længe været en inspirationskilde for designere. Jeg elsker det enkle sidelayout, fra den store titelkopi og det detaljerede billede, til omridset, der omgiver formen, til farverne og skrifttyperne, der er meget behagelige for øjet.
Den gratis manual IMPACT tilbyder til download her fremhæver heller ikke selve download i den blå knap, der giver dig mulighed for at indsende den udfyldte formular. IMPACT inviterer dig snarere til at "generere flere konverteringer" ved at fokusere på, hvad du kan få ud af at læse guiden.
Landingssider for at lære mere
12. Unbounce
Det er ikke underligt Unbounce er øverst på denne liste - de skrev virkelig bogen om at skabe landingssider med høj konvertering. Selvom der er mange fantastiske ting ved denne landingsside, er to, som jeg virkelig godt kan lide: 1) brugen af en chatboks i stedet for en klassisk formular, og 2) den detaljerede - men godt pakket - information under formularen/hjemmesidens design
Den første hjælper med at rette opmærksomheden mod formålet med siden – for at du skal udfylde en formular – på en måde, der er diskret og ikke føles som en opgave. Den anden giver siden et SEO-boost (søgemaskiner vil have mere indhold at crawle) og fjerner angst fra folk, der har brug for at vide mere om et stykke indhold, før de indsender deres oplysninger, uden at distrahere folk fra chatvinduet.
13. Bills.com. Hjemmeside design
Folk tænker ofte på landingssider som statiske sider på dit websted. Men med de rigtige værktøjer kan du gøre dem interaktive og personlige.
Tag eksemplet nedenfor med Bills.com. For at finde ud af, om du ville have gavn af deres konsultation, skal du besvare tre spørgsmål, før du får vist formularen. Det starter med dette:
Så besvarer du yderligere to spørgsmål som nedenstående:
Og her er den endelige landingssideformular, hvor du udfylder dine oplysninger:
Jeg er ikke sikker på, hvordan algoritmen virker (eller om der overhovedet er en), men mens jeg udfyldte den, var jeg bekymret over nej kvalifikationer. Da jeg fandt ud af, hvad jeg gjorde, var jeg spændt på at udfylde formularen, hvilket jeg er sikker på, at de fleste mennesker, der har gæld og bruger dette værktøj, gør. Ved at gøre dette tilbud mere eksklusivt, før formularen vises på landingssiden, vil jeg vædde på, at Bills.com vil betydeligt øget konvertering.
14. Trulia Hjemmeside Design
Trulia gjorde noget meget lig Bills.com med sin landingsside. Det starter med en simpel formular, der beder om "adresse" (hvilket lyder mindre uhyggeligt end "din adresse", selvom det er det, de betyder). Under dette enkle formularfelt er der en lys orange knap, der står i god kontrast til karakterbilledet bag formularen og understreger, at vurderingen vil blive personliggjort til dit hjem.
Selve adressen er naturligvis ikke nok til at vurdere husets værdi. Det betegner blot husets omgivelser. Derfor indeholder næste side yderligere spørgsmål om selve ejendommen, såsom antallet af senge og bade. Nedenfor kan du se en kopi af "Fortæl os, hvor vi skal sende rapporten" - med den ansvarsfraskrivelse, at du ved at indtaste disse oplysninger accepterer at kontakte ejendomsmægleren. Dette er et godt eksempel på, hvordan en virksomhed værdsætter sine besøgende helt fra begyndelsen, samtidig med at den sætter de besøgendes forventninger til, hvad der vil ske som et resultat.
15. Landbot Hjemmeside Design
landbot, en tjeneste, der opretter chatbot-baserede landingssider, placerer sit eget produkt i midten af sin chat-baserede landingsside. Besøgende bliver mødt af en venlig bot - komplet med emojis og GIF'er - der opfordrer dem til at give oplysninger i et samtaleformat snarere end den traditionelle form.
16. Webprofits
For en lille kontrast... hvad med lange landingssider? Med blot et par tricks kan du få selv den længste landingsside til at se kort ud. Webprofits-landingssiden nedenfor viser, hvordan du gør dette. Hjemmeside design
Der er en fremtrædende CTA-knap øverst til højre for at lære mere - med god kontrast på baggrunden for at få den til at skille sig ud, og en pil ned for at opmuntre til at rulle. Ved ikke at placere formularfeltet foran, hjælper de med at reducere friktionen og giver besøgende mulighed for at lære mere, før de bliver præsenteret for en konverteringsmulighed.
De giver dig også mulighed for at forstå, hvad der virkelig er делает Webprofits . Resten af siden indeholder detaljer om, hvad du vil modtage, når du indsender dine oplysninger. Derudover inkluderer det strategiske CTA'er, der hjælper dig med at navigere tilbage til toppen for at udfylde formularen, såsom "Let's Talk".
17. H.BLOOM
Nogle gange skal du bare stoppe op og beundre en landingsside for, hvor smuk den er. Når du bruger et foto i høj opløsning og en masse hvid plads på landingssiden H.BLOOM flot at se på.
Ud over sin skønhed har siden nogle fantastiske konverteringselementer: en overheadformular, en klar og kortfattet beskrivelse af, hvad der vil ske, når du udfylder formularen, og endda en lys orange "Send"-knap. Det eneste vi vil ændre? Kopiér på indsend-knappen - Dette kan være mere specifikt for det tilbud, der tilbydes. Hjemmeside design
18. Konverteringslab
Selvom jeg ikke ville inkludere et eksempelformularindlæg i et indlæg om destinationssider, er dette websted specielt. Hjemmeside er hele webstedet - navigationslinkene fører dig blot til oplysningerne nedenfor. Hjemmeside design
Når du klikker på "Få hjælp til landingssider", flyttes hele webstedet for at gøre plads til formularen. Sådan ser det ud, før du klikker:
Og når du klikker på den CTA, skal du tjekke, hvordan formularen ser ud:
Jeg kan godt lide, at du ikke behøver at forlade siden for at udfylde formularen, men formularen vil ikke være påtrængende for tilfældige besøgende på webstedet.
Idéer/hjemmesidedesign
En veloptimeret hjemmeside kan gøre kunder til kundeemner ved at indfange oplysninger, der hjælper dig med bedre at forstå, markedsføre og glæde dine besøgende. Da landingssider er afgørende for konverteringer, er det vigtigt at sikre, at de er godt planlagt, designet og udført. Her er et par ting, du skal overveje, når du opretter målrettet sider: Attraktiv æstetik: Kun farven på din landingsside og en ren brugergrænseflade kan hjælpe. Besøgende vil gerne lære mere om dine produkter og se beviser for den værdi, du tilbyder. Tag et kig på #10 på vores liste, Inbound Emotion, for et godt eksempel på en fantastisk webside.
Less is more: Lad sætningen eller billederne tale det meste, men sørg for at inkludere alle beskrivende overskrifter og understøttende tekst for at gøre din landingsside klar og overbevisende. Dette gælder for næsten alle komponenter på siden: hvidt mellemrum, simpel kopi og kortere formularer.
Hjemmeside design
Hold besøgende på siden: Ved at fjerne hovednavigationen eller eventuelle distraherende backlinks er det mindre sandsynligt, at der er en slags leadgenereringsfriktion, der kan få besøgende til at forlade din side.
Deling på sociale netværk. En nem måde at tiltrække besøgende til din landingsside er ved at bruge deleknapper isociale netværk, så de kan distribuere dit indhold til deres følgere på sociale medier. Kunderne er jo centrum for dit marketingsvinghjul.
A/B-test: Landingssider er vigtige for at udføre korrekt, og da forbrugerpsykologi nogle gange kan være overraskende, er det altid bedst at eksperimentere med forskellige versioner af dine sider for at se, hvilken der har den højeste konverteringsrate (CVR). Tjek placeringen af tilbuddet, typerne af CTA'er eller endda farveskemaet.
Call-To-Action: CTA, hvor kødet er på landingssiden, eller vendepunktet, hvor udsigten til at blive kontakter er. CTA'er kan bede besøgende om at abonnere, downloade, udfylde en formular, dele videre sociale netværk osv., men generelt er CTA'er nødvendige for at engagere dit publikum mere aktivt med dit tilbud. For at generere leads skal CTA'er være dristige og engagerende, men vigtigst af alt skal de formidle værdi effektivt.
Efterlad en kommentar