Hjemmesidedesign (eller hjemmesidedesign) er den visuelle og strukturelle utformingen av den første siden på et nettsted som besøkende ser når de besøker nettstedet for første gang. Hjemmesiden spiller en nøkkelrolle i å skape det første inntrykket av nettstedet og hjelper besøkende med å finne informasjonen de trenger eller navigere videre gjennom ressursen.
1. Shopify-hjemmesidedesign
Som mange av de andre landingssidene i dette innlegget, er eksempellandingssiden Shopify gjør det enkelt. For eksempel er den brukerfokuserte overskriften bare noen få ord, og siden er avhengig av enkle punkttegn i stedet for avsnitt for å formidle detaljene og fordelene med prøveperioden. Det er bare noen få felt som må fylles ut før du begynner. Alt dette gjør det enklere for deg å selge online ved å bruke verktøyet ditt.
2. Utforming av snutehjemmeside
Landingssider hjelper brukere med å avgjøre om produktet eller tjenesten din er verdt den verdifulle tiden og energien. Hvilken bedre måte å kommunisere verdiforslaget ditt tydelig og direkte enn ved å matche de besøkende med selve problemet appen din løser?
Instagram-kommentarer blir flere
SnuteEn Mac-app som slår av varsler på skjermen dekker dette fullstendig vise uten å fortelle mentalitet på deres minimale landingsside. Besøkende på denne siden blir møtt av en rask brann av vanskelige varsler i øverste venstre hjørne av skjermen. Animasjonen er ikke bare morsom, men formidler også på en overbevisende måte nytten av applikasjonen uten lange beskrivelser.
3. TransferWise-hjemmesidedesign
TransferWise lar deg sende og motta penger i flere valutaer, og landingssiden, vist nedenfor, deler opp hver enkelt handling slik at du ikke blir distrahert av alternativer som ikke gjelder deg.
Ønsker du å sende penger kan du fylle ut overføringsskjemaet. For å motta penger, gå ganske enkelt til den midterste fanen og for å registrere deg for TransferWise med debetkortet ditt, gå til fanen helt til høyre.
Hver fane på denne landingssiden lager sin egen oppfordring til handling avhengig av hva du registrerer deg for - hver med en knallgrønn ramme for å markere neste trinn etter tre mulige startpunkter.
4. Airbnb-hjemmesidedesign
For å hjelpe til med å konvertere besøkende til verter, airbnb tilbyr litt fristende personalisering: et grovt estimat av gjennomsnittlig inntekt basert på posisjonen din. Du kan legge inn tilleggsinformasjon om din potensielle plassering i feltene for å få en enda mer personlig vurdering.
Hvis du allerede har besøkt en side du er overbevist om, gjør en tydelig oppfordring til handling øverst på siden det enkelt å konvertere på stedet.
5.Teambit
sære er vanligvis ikke det første ordet du tenker på når du tenker på HR-programvare, men Teambits visuelle landingsside er nettopp det. Et enkelt skjema med ett felt er ledsaget av et bedårende kontor fullt av dyrekarakterer - alle sammen veldig fornøyd med Teambit, hvis du er interessert. Et tegneseriedyr vises ved siden av hver informasjonsdel på landingssiden, og lokker besøkende til å bla ned for å lære mer. Hjemmesidedesign
Destinasjonsside Teambit er et godt bevis på at du ikke trenger å ha et "morsomt" produkt eller en tjeneste for å lage en morsom landingsside.
6. Wistia-hjemmesidedesign
Først av alt er dette landingssiden Wistia for deres gratis Wistia-konto. Umiddelbart legger du merke til skjemaet med ett felt for å opprette en konto - den blå bakgrunnen med minimal design kontrasterer fint med det knallhvite skjemafeltet.
Lengden på skjemafeltet kombinert med fremtredende plassering eliminerer nesten all friksjon når du oppretter en konto... men hvis du er i tvil, kan du alltid rulle nedenfor for å lese FAQ. Ved å skille de to med en sterk fargekontrast, gjør Wistia konverteringsprosessen mye enklere.
7. Webflyt. Hjemmesidedesign
Webflow, et designverktøy for webutviklere, pakker mye informasjon inn i en GIF og tre skjemafelt. Det ville vært fint å ha hele registreringsskjemaet på én linje - ikke bare gjør det siden kortere, men å fylle ut hvert felt fra venstre mot høyre viser brukerne hvor nærme de er å klikke på den fjerde blå knappen og komme i gang gratis.
Den animerte GIF-en under skjemaet vises i samme ramme på nettstedet slik at brukerne kan se hvordan produktet fungerer. и registrere deg uten å bla eller gå til en ny side.
E-bok design av hjemmeside
8. Nauto-hjemmesidedesign
Nauto, en dataplattform for selvkjørende biler, bidrar til å gjøre autonom kjøring tryggere for selskaper som administrerer flåter. Naturligvis vil kundene hans trenge all informasjonen for å selge på denne plattformen. Nauto har det superenkelt e-bok, hvis landingsside gir deg et kort kontaktskjema og forhåndsvise statistikk for å bevise hvorfor denne ressursen er så viktig.
Den grønne "Last ned nå"-knappen kan til og med ha vært med vilje (grønn betyr tross alt "gå").
Rull ned og du vil se en annen "Get eBook" CTA for å minne brukerne på hva som er i butikken. Du vil også se tre skurrende bilulykkesstatistikker for å oppmuntre brukere til å lære mer. Sjekk det ut nedenfor.
9. Industrial Strong Marketing Hjemmeside Design
Denne landingssiden trekker meg umiddelbart inn med sin uimotståelige, slagkraftige overskrift: «Ikke få meg til å zoome». Dette taler direkte til den generelle opplevelsen de fleste av oss har når vi blar gjennom telefonene eller nettbrettene våre – og det er også litt frekt.
Men det er ikke det eneste som fikk meg til å interessere meg for denne landingssiden. Legg merke til hvordan den røde fargen er strategisk plassert øverst og nederst i skjemaet, og trekker deg enda nærmere konverteringshendelsen.
Dessuten er dette designet meta å starte opp: det ser ut og fungerer bra på mobile enheter. Husk at mange besøkende vil få tilgang til landingssidene dine på smarttelefoner eller nettbrett, og hvis design av nettstedet ditt ikke passer dem, kan de gi opp og forlate siden din.
Spesialister innen Industrial Strength Marketing gjorde feltet fonter og former store nok til at besøkende ikke trenger å for eksempel zoome for å lese og samhandle med innholdet.
10. Velaro Live Chat
Noen ganger utgjør de minste detaljene den største forskjellen. Det er for eksempel de som lager landingssiden Velaro Live Chat fantastisk.
Det lille PDF-symbolet over elementbildet hjelper til med å bestemme hvilket format nedlastingen skal være i. En pil foran underoverskriften bidrar ytterligere til å fremheve den viktige kopien som besøkende ønsker å lese. I likhet med IMPACT har de også en automatisk avkrysningsboks for abonnement til nyhetsbrevet på skjemaet deres - som, hvis omgjort til en ekstra avmerkingsboks, er en fin måte å øke antallet abonnenter på. Alle disse små, tilsynelatende ubetydelige detaljene bidrar til et solid, fantastisk design av destinasjonssiden. Hjemmesidedesign
11. IMPACT Merkevarebygging og design / Hjemmesidedesign
Hjemmeside PÅVIRKNING har lenge vært en inspirasjonskilde for designere. Jeg elsker det enkle sideoppsettet, fra den store tittelkopien og det detaljerte bildet, til konturene som omgir formen, til fargene og skriftene som er veldig behagelige for øyet.
Den gratis manualen IMPACT tilbyr for nedlasting her fremhever heller ikke selve nedlastingen i den blå knappen som lar deg sende inn det utfylte skjemaet. I stedet inviterer IMPACT deg til å "generere flere konverteringer" ved å fokusere på hva du kan oppnå ved å lese veiledningen.
Landingssider for å lære mer
12. Unbounce
Ikke rart det Unbounce er på toppen av denne listen - de skrev virkelig boken om å lage landingssider med høy konvertering. Selv om det er mange fantastiske ting med denne landingssiden, er to jeg virkelig liker: 1) bruken av en chatteboks i stedet for et klassisk skjema, og 2) den detaljerte - men godt pakket - informasjonen under skjemaet/Hjem Sidedesign
Den første hjelper til med å fokusere oppmerksomheten på formålet med siden – for at du skal fylle ut et skjema – på en måte som ikke er påtrengende og ikke føles som et ork. Den andre gir siden et SEO-løft (søkemotorer vil ha mer innhold å gjennomgå) og fjerner angst fra folk som trenger å vite mer om et innhold før de sender inn informasjonen sin, uten å distrahere folk fra chattevinduet.
13. Bills.com. Hjemmesidedesign
Folk tenker ofte på landingssider som statiske sider på nettstedet ditt. Men med de riktige verktøyene kan du gjøre dem interaktive og personlige.
Ta eksemplet nedenfor med Bills.com. For å finne ut om du vil ha nytte av konsultasjonen deres, svar på tre spørsmål før du får vist skjemaet. Det starter med dette:
Deretter svarer du på to spørsmål til som det nedenfor:
Og her er det endelige landingssideskjemaet der du fyller ut informasjonen din:
Jeg er ikke sikker på hvordan algoritmen fungerer (eller om det er en i det hele tatt), men mens jeg fylte den ut, var jeg litt bekymret for no kvalifikasjoner. Når jeg fant ut hva jeg gjorde, var jeg spent på å fylle ut skjemaet, noe jeg er sikker på at de fleste som har gjeld og bruker dette verktøyet gjør. Ved å gjøre dette tilbudet mer eksklusivt før skjemaet vises på landingssiden, vedder jeg på at Bills.com vil gjøre det betydelig økt konvertering.
14. Trulia Hjemmeside Design
Trulia gjorde noe som ligner veldig på Bills.com med landingssiden. Det starter med et enkelt skjema som ber om "adresse" (som høres mindre skummelt ut enn "din adresse", selv om det er det de mener). Under dette enkle skjemafeltet er en knalloransje knapp som står i god kontrast til karakterbildet bak skjemaet og understreker at anslaget vil bli personlig tilpasset ditt hjem.
Selve adressen er selvsagt ikke nok til å anslå husets verdi. Det betegner ganske enkelt husets omgivelser. Derfor inneholder neste side ytterligere spørsmål om selve eiendommen, for eksempel antall senger og bad. Nedenfor kan du se en kopi av "Fortell oss hvor vi skal sende rapporten" - med ansvarsfraskrivelsen om at du ved å oppgi denne informasjonen godtar å kontakte eiendomsmegleren. Dette er et godt eksempel på hvordan et selskap verdsetter sine besøkende helt fra begynnelsen, samtidig som de setter de besøkendes forventninger til hva som vil skje som et resultat.
15. Landbot Hjemmeside Design
landbot, en tjeneste som lager chatbot-baserte landingssider, plasserer sitt eget produkt i midten av sin chat-baserte landingsside. Besøkende blir møtt av en vennlig bot – komplett med emojier og GIF-er – som oppmuntrer dem til å gi informasjon i et samtaleformat i stedet for den tradisjonelle formen.
16. Webprofits
For en liten kontrast... hva med lange landingssider? Med bare noen få triks kan du få selv den lengste landingssiden til å se kort ut. Webprofits-landingssiden nedenfor viser hvordan du gjør dette. Hjemmesidedesign
Det er en fremtredende CTA-knapp øverst til høyre for å lære mer – med god kontrast på bakgrunnen for å få den til å skille seg ut, og en pil ned for å oppmuntre til rulling. Ved å ikke plassere skjemafeltet foran, bidrar de til å redusere friksjonen og gir besøkende muligheten til å lære mer før de får et konverteringsalternativ.
De lar deg også forstå hva som egentlig er gjør Webprofits . Resten av siden inneholder detaljer om hva du vil motta når du sender inn informasjonen din. I tillegg inkluderer den strategiske CTA-er for å hjelpe deg med å navigere tilbake til toppen for å fylle ut skjemaet, for eksempel "La oss snakke."
17. H.BLOOM
Noen ganger trenger du bare å stoppe opp og beundre en landingsside for hvor vakker den er. Når du bruker et høyoppløselig bilde og mye hvit plass på landingssiden H.BLOOM fint å se på.
Utover sin skjønnhet har siden noen flotte konverteringselementer: et overheadskjema, en klar og kortfattet beskrivelse av hva som vil skje når du fyller ut skjemaet, og til og med en lys oransje "Send"-knapp. Det eneste vi vil endre? Kopier på Send-knappen – Dette kan være mer spesifikt for forslaget som tilbys. Hjemmesidedesign
18. Konverteringslab
Selv om jeg ikke vil inkludere et eksempelskjemainnlegg i et innlegg om landingssider, er dette nettstedet spesielt. Hjemmeside er hele nettstedet - navigasjonslenkene tar deg ganske enkelt til informasjonen nedenfor. Hjemmesidedesign
Når du klikker på «Få hjelp på landingssider», flyttes hele nettstedet for å gi plass til skjemaet. Slik ser det ut før du klikker:
Og når du klikker på CTA, sjekk ut hvordan skjemaet ser ut:
Jeg liker at du ikke trenger å forlate siden for å fylle ut skjemaet, men skjemaet vil ikke være påtrengende for tilfeldige besøkende på nettstedet.
Ideer/hjemmesidedesign
En godt optimalisert hjemmeside kan gjøre kunder til potensielle kunder ved å fange opp informasjon som vil hjelpe deg å bedre forstå, markedsføre og glede de besøkende. Siden landingssider er avgjørende for konverteringer, er det viktig å sørge for at de er godt planlagt, designet og utført. Her er noen ting du bør vurdere når du oppretter målrettet sider:Attraktiv estetikk: Bare fargen på landingssiden din og et rent brukergrensesnitt kan hjelpe. Besøkende vil ønske å lære mer om produktene dine og se bevis på verdien du tilbyr. Ta en titt på #10 på listen vår, Inbound Emotion, for et godt eksempel på en fantastisk nettside.
Less is more: La setningen eller bildene gjøre det meste av samtalen, men sørg for å inkludere alle beskrivende overskrifter og støttetekst for å gjøre landingssiden din tydelig og overbevisende. Dette gjelder nesten alle komponentene på siden: mellomrom, enkel kopi og kortere skjemaer.
Hjemmesidedesign
Hold besøkende på siden: Ved å fjerne hovednavigasjonen eller eventuelle distraherende tilbakekoblinger, er det mindre sannsynlig at det er en slags potensiell friksjon som kan få besøkende til å forlate siden din.
Deling på sosiale nettverk. En enkel måte å tiltrekke besøkende til landingssiden din er å bruke deleknappersosiale nettverk, slik at de kan distribuere innholdet ditt til sine følgere på sosiale medier. Tross alt er kundene sentrum for markedsføringens svinghjul.
A/B-testing: Landingssider er viktige for å utføre riktig, og siden forbrukerpsykologi noen ganger kan være overraskende, er det alltid best å eksperimentere med forskjellige versjoner av sidene dine for å se hvilken som har høyest konverteringsfrekvens (CVR). Sjekk plasseringen av tilbudet, typene CTAer, eller til og med fargeskjemaet.
Call-To-Action: CTA, der kjøttet er på landingssiden, eller vendepunktet, der utsiktene til å bli kontakter er. CTAer kan be besøkende om å abonnere, laste ned, fylle ut et skjema, dele videre sosiale nettverk osv., men generelt sett er CTAer nødvendige for å engasjere publikum mer aktivt med tilbudet ditt. For å generere potensielle kunder må CTAer være dristige og engasjerende, men viktigst av alt, de må formidle verdi effektivt.
Оставить комментарий