Kotisivun (tai kotisivun) suunnittelu on verkkosivuston ensimmäisen sivun visuaalinen ja rakenteellinen suunnittelu, jonka kävijät näkevät vieraillessaan sivustolla ensimmäistä kertaa. Kotisivulla on keskeinen rooli ensivaikutelman luomisessa sivustosta ja se auttaa vierailijoita löytämään tarvitsemansa tiedon tai navigoimaan resurssissa pidemmälle.
1. Shopify-kotisivun suunnittelu
Kuten monet muut tämän viestin aloitussivut, esimerkki aloitussivusta Shopify tekee siitä yksinkertaista. Esimerkiksi käyttäjäkeskeinen otsikko on vain muutama sana, ja sivu luottaa yksinkertaisiin luettelomerkeihin kappaleiden sijaan ilmaisemaan kokeilun yksityiskohtia ja etuja. On vain muutamia kenttiä, jotka on täytettävä ennen kuin aloitat. Kaikki tämä helpottaa online-myyntiä työkalusi avulla.
2. Kuono-kotisivun suunnittelu
Aloitussivut auttavat käyttäjiä päättämään, onko tuotteesi tai palvelusi heidän arvokkaan aikansa ja energiansa arvoinen. Mikä olisikaan parempi tapa viestiä arvolupauksesi selkeästi ja suoraan kuin sovittaa vierailijasi juuri siihen ongelmaan, jonka sovelluksesi ratkaisee?
Instagram-kommentteja tulee lisää
KuonoMac-sovellus, joka vaimentaa näytön ilmoitukset, kattaa tämän kokonaan näytä kertomatta mentaliteettia minimaalisella aloitussivullaan. Tämän sivun vierailijoita tervehtii kiusallisten ilmoitusten nopea tulipalo näytön vasemmassa yläkulmassa. Animaatio ei ole vain hauska, vaan myös vakuuttavasti välittää sovelluksen hyödyllisyyden ilman pitkiä kuvauksia.
3. TransferWisen kotisivun suunnittelu
TransferWise voit lähettää ja vastaanottaa rahaa useissa valuutoissa, ja sen aloitussivu, joka näkyy alla, erittelee jokaisen yksittäisen toiminnon, jotta sinua ei häiritse vaihtoehdot, jotka eivät koske sinua.
Jos haluat lähettää rahaa, voit täyttää siirtolomakkeen. Voit vastaanottaa rahaa siirtymällä keskimmäiselle välilehdelle ja rekisteröityäksesi TransferWise-palveluun pankkikortillasi siirtymällä oikeanpuoleiseen välilehteen.
Jokainen välilehti tällä aloitussivulla luo oman toimintakehotus riippuen siitä, mitä olet rekisteröitymässä – jokaisessa on kirkkaan vihreä kehys, joka korostaa seuraavaa vaihettasi kolmen mahdollisen aloituskohdan jälkeen.
4. Airbnb-kotisivun suunnittelu
Auttaaksesi muuttamaan vierailijat isännöiksi Airbnb tarjoaa houkuttelevaa personointia: karkea arvio keskituloista sijaintisi perusteella. Voit syöttää kenttiin lisätietoja mahdollisesta sijoituksestasi saadaksesi entistä henkilökohtaisemman arvion.
Jos olet jo käynyt sivulla, josta olet vakuuttunut, sivun yläreunassa oleva selkeä toimintakehotus helpottaa muuntamista paikan päällä.
5. Joukkue
omituinen ei yleensä ole ensimmäinen sana, joka tulee mieleen, kun ajattelet HR-ohjelmistoa, mutta Teambitin visuaalinen aloitussivu on juuri sitä. Yksinkertaiseen muotoon, jossa on yksi kenttä, liittyy suloinen toimisto täynnä eläinhahmoja - kaikkia hyvin tyytyväinen Teambitiin, jos olet kiinnostunut. Sarjakuvaeläin näkyy aloitussivun jokaisen tietoosion vieressä ja houkuttelee vierailijat vierittämään alas saadaksesi lisätietoja. Kotisivun suunnittelu
Aloitussivu Teambit on loistava todiste siitä, että sinun ei tarvitse olla "hauskoja" tuotteita tai palveluita luodaksesi hauska aloitussivu.
6. Wistia Kotisivun suunnittelu
Ensinnäkin tämä on aloitussivu Wistia ilmaiselle Wistia-tililleen. Huomaat heti lomakkeen, jossa on yksi kenttä tilin luomiseksi - sininen tausta minimaalisella muotoilulla kontrasti hienosti kirkkaan valkoisen lomakekentän kanssa.
Lomakekentän pituus yhdistettynä näkyvään sijoitteluun eliminoi lähes kaiken kitkan tiliä luotaessa... mutta jos olet epävarma, voit aina selata alla lukeaksesi UKK. Erottelemalla nämä kaksi voimakkaalla värikontrastilla Wistia helpottaa muunnosprosessia huomattavasti.
7. Webflow. Kotisivun suunnittelu
Webflow, suunnittelutyökalu web-kehittäjille, pakkaa paljon tietoa GIF-tiedostoon ja kolmeen lomakekenttään. Olisi mukavaa, jos koko rekisteröintilomake olisi yhdellä rivillä - se ei vain lyhennä sivua, vaan jokaisen kentän täyttäminen vasemmalta oikealle näyttää käyttäjille, kuinka lähellä he ovat napsauttavat neljättä sinistä painiketta ja aloittavat ilmaiseksi.
Lomakkeen alla oleva animoitu GIF näytetään samassa kehyksessä verkkosivustolla, jotta käyttäjät voivat nähdä, kuinka tuote toimii. и rekisteröidy vierittämättä tai siirtymättä uudelle sivulle.
E-kirjan kotisivujen suunnittelu
8. Nauton kotisivujen suunnittelu
Nauto, itseajavien autojen tietoalusta, auttaa tekemään autonomisesta ajosta turvallisempaa yrityksiä, jotka hallinnoivat kalustoja. Luonnollisesti hänen asiakkaansa tarvitsevat kaikki tiedot myydäkseen tällä alustalla. Nautolla se on erittäin yksinkertainen e-kirja, jonka aloitussivulla on lyhyt yhteydenottolomake ja esikatselutilastot todistaakseen, miksi tämä resurssi on niin tärkeä.
Vihreä "Lataa nyt" -painike on saattanut jopa olla tarkoituksella (vihreä tarkoittaa "mennä").
Vieritä alas ja näet toisen "Hanki sähköinen kirja" -toimintakehotuksen, joka muistuttaa käyttäjiä tulevasta. Näet myös kolme järkyttävää auto-onnettomuustilastoa, jotka rohkaisevat käyttäjiä oppimaan lisää. Tarkista se alta.
9. Industrial Strong Marketing Kotisivun suunnittelu
Tämä aloitussivu houkuttelee minut välittömästi vastustamattomalla, räikeällä otsikollaan: "Älä zoomaa." Tämä kertoo suoraan yleisestä kokemuksesta, jonka useimmat meistä kokevat selatessaan puhelimia tai tabletteja - ja se on myös hieman röyhkeää.
Mutta se ei ole ainoa asia, joka sai minut kiinnostumaan tästä aloitussivusta. Huomaa, kuinka punainen väri on sijoitettu strategisesti lomakkeen ylä- ja alaosaan, mikä vie sinut entistä lähemmäksi tulostapahtumaa.
Lisäksi tämä malli on metallinen käynnistystä: se näyttää ja toimii erinomaisesti mobiililaitteet. Muista, että monet vierailijat pääsevät aloitussivuillesi älypuhelimellaan tai tablet-laitteellaan sivustosi suunnittelu ei sovi heille, he saattavat luovuttaa ja poistua sivultasi.
Industrial Strength Marketingin asiantuntijat tekivät kentän fontit ja lomakkeet ovat riittävän suuria, jotta vierailijoiden ei tarvitse esimerkiksi zoomata lukea sisältöä ja olla vuorovaikutuksessa sen kanssa.
10. Velaro Live Chat
Joskus pienimmät yksityiskohdat tekevät suurimman eron. He ovat esimerkiksi ne, jotka tekevät aloitussivun Velaro Live Chat hämmästyttävä.
Tämä pieni PDF-symboli kohteen kuvan yläpuolella auttaa määrittämään, missä muodossa lataus tulee olemaan. Alaotsikon edessä oleva nuoli auttaa korostamaan edelleen tärkeää tekstiä, jonka vierailijat haluavat lukea. Kuten IMPACT, niissä on myös automaattisesti valittu valintaruutu tilauksia uutiskirjeen lomakkeella - joka, jos se muutetaan ylimääräiseksi valintaruuduksi, on loistava tapa lisätä tilaajamäärääsi. Kaikki nämä pienet, näennäisesti merkityksettömät yksityiskohdat auttavat luomaan vankan, hämmästyttävän aloitussivun suunnittelun. Kotisivun suunnittelu
11. VAIKUTUS Brändäys ja suunnittelu / Kotisivujen suunnittelu
koti VAIKUTUS ovat pitkään olleet suunnittelijoiden inspiraation lähde. Pidän yksinkertaisesta sivuasettelusta, suuresta otsikkokopiosta ja yksityiskohtaisesta kuvasta muotoa ympäröivään ääriviivaan, väreihin ja fonteihin, jotka miellyttävät silmää.
Ilmainen manuaalinen IMPACT tarjoaa ladattavaksi täältä ei myöskään korosta itse latausta sinisessä painikkeessa, jonka avulla voit lähettää täytetyn lomakkeen. Sen sijaan IMPACT kutsuu sinut "luomaan lisää tuloksia" keskittymällä siihen, mitä voit hyötyä oppaan lukemisesta.
Aloitussivut saadaksesi lisätietoja
12. Unbounce
Ei ihme, että Unbounce on tämän luettelon kärjessä – he todella kirjoittivat kirjan paljon tuloksia tuottavien aloitussivujen luomisesta. Vaikka tällä aloitussivulla on paljon hämmästyttäviä asioita, kaksi, joista pidän todella, ovat: 1) chat-laatikon käyttö perinteisen lomakkeen sijaan ja 2) yksityiskohtaiset - mutta hyvin pakatut - tiedot lomakkeen/Etusivun alla. Sivun suunnittelu
Ensimmäinen auttaa ohjaamaan huomion sivun tarkoitukseen – lomakkeen täyttämiseen – tavalla, joka on huomaamaton eikä tunnu työlältä. Toinen tehostaa sivun hakukoneoptimointia (hakukoneilla on enemmän indeksoitavaa sisältöä) ja poistaa ahdistuksen ihmisistä, joiden on tiedettävä enemmän sisällöstä ennen tietojen lähettämistä, häiritsemättä ihmisiä keskusteluikkunasta.
13. Bills.com. Kotisivun suunnittelu
Ihmiset ajattelevat usein aloitussivuja verkkosivustosi staattisina sivuina. Mutta oikeilla työkaluilla voit tehdä niistä interaktiivisia ja yksilöllisiä.
Ota alla oleva esimerkki Bills.com. Vastaa kolmeen kysymykseen ennen lomakkeen näyttämistä saadaksesi selville, hyötyisitkö heidän neuvonnastaan. Se alkaa tästä:
Sitten vastaat vielä kahteen alla olevan kaltaiseen kysymykseen:
Ja tässä on viimeinen aloitussivulomake, johon täytät tietosi:
En ole varma, miten algoritmi toimii (tai onko sellaista ollenkaan), mutta tätäessäni olin huolissani ei pätevyys. Kun sain tietää, mitä tein, olin innoissani lomakkeen täyttämisestä, minkä olen varma useimmat ihmiset, joilla on velkaa ja käyttävät tätä työkalua. Tekemällä tästä tarjouksesta eksklusiivisemman ennen lomakkeen ilmestymistä aloitussivulle, Bills.com varmasti tekee sen huomattavasti lisääntynyt muuntaminen.
14. Trulia Kotisivun suunnittelu
Trulia teki jotain hyvin samanlaista kuin Bills.com aloitussivullaan. Se alkaa yksinkertaisella lomakkeella, jossa kysytään "osoitetta" (joka kuulostaa vähemmän kammottavalta kuin "osoitteesi", vaikka sitä ne tarkoittavatkin). Tämän yksinkertaisen lomakekentän alla on kirkkaan oranssi painike, joka erottuu hyvin lomakkeen takana olevasta hahmokuvasta ja korostaa, että arvio räätälöidään kotiisi sopivaksi.
Itse osoite ei tietenkään riitä arvioimaan talon arvoa. Se tarkoittaa yksinkertaisesti talon ympäristöä. Siksi seuraavalla sivulla on lisäkysymyksiä itse kiinteistöstä, kuten sänkyjen ja kylpyhuoneiden lukumäärästä. Alla on kopio "Kerro meille, minne raportti lähetetään" - ja vastuuvapauslauseke, jonka mukaan antamalla nämä tiedot suostut ottamaan yhteyttä kiinteistönvälittäjään. Tämä on loistava esimerkki siitä, kuinka yritys arvostaa kävijöitään alusta alkaen ja samalla asettaa kävijöiden odotuksia siitä, mitä sen seurauksena tapahtuu.
15. Landbotin kotisivun suunnittelu
landbot, palvelu, joka luo chatbot-pohjaisia aloitussivuja, asettaa oman tuotteensa chat-pohjaisen aloitussivunsa keskelle. Vierailijoita tervehtii ystävällinen botti, jossa on hymiöitä ja GIF-kuvia, joka rohkaisee heitä tarjoamaan tietoa keskustelumuodossa perinteisen muodon sijaan.
16. Webprofits
Pienen kontrastin saamiseksi... entä pitkät aloitussivut? Muutamalla tempulla saat pisimmänkin aloitussivun näyttämään lyhyeltä. Alla oleva Webprofits-aloitussivu näyttää, kuinka tämä tehdään. Kotisivun suunnittelu
Oikeassa yläkulmassa on näkyvä toimintakehotuspainike saadaksesi lisätietoja – taustalla on hyvä kontrasti, jotta se erottuu joukosta, ja alanuoli kannustaa vierittämään. Koska lomakekenttää ei sijoiteta eteen, ne auttavat vähentämään kitkaa ja antavat vierailijoille mahdollisuuden oppia lisää, ennen kuin heille esitetään muunnosvaihtoehto.
Niiden avulla voit myös ymmärtää, mikä todella on делает Webprofits . Sivun loppuosassa on tietoja siitä, mitä saat, kun lähetät tietosi. Lisäksi se sisältää strategisia toimintakehotuksia, joiden avulla voit siirtyä takaisin alkuun täyttääksesi lomakkeen, kuten "Puhutaan".
17. H.BLOOM
Joskus sinun tarvitsee vain pysähtyä ihailemaan aloitussivua sen kauniin ilmeen vuoksi. Kun käytät korkearesoluutioista valokuvaa ja paljon valkoista tilaa aloitussivulla H.BLOOM kiva katsoa.
Kauneuden lisäksi sivulla on hienoja muunnoselementtejä: ylälomake, selkeä ja ytimekäs kuvaus siitä, mitä lomakkeen täyttäessä tapahtuu, ja jopa kirkkaan oranssi "Lähetä"-painike. Ainoa asia, jonka muutamme? Kopio Lähetä-painikkeesta – Tämä voi olla tarkempi tarjottavalle ehdotukselle. Kotisivun suunnittelu
18. Conversionlab
Vaikka en sisällyttäisikään aloitussivuja koskevaan viestiin esimerkkilomakeviestiä, tämä sivusto on erityinen. Kotisivu on koko sivusto - navigointilinkit vievät sinut alla oleviin tietoihin. Kotisivun suunnittelu
Kun napsautat "Ohjeita aloitussivuille", koko sivusto siirtyy tekemään tilaa lomakkeelle. Tältä se näyttää ennen kuin napsautat:
Ja kun napsautat tätä toimintakehotusta, tarkista, miltä lomake näyttää:
Pidän siitä, että sinun ei tarvitse poistua sivulta täyttääksesi lomakkeen, mutta lomake ei häiritse satunnaisia sivuston kävijöitä.
Ideat/Kotisivun suunnittelu
Hyvin optimoitu kotisivu voi tehdä asiakkaista liidejä keräämällä tietoa, joka auttaa sinua ymmärtämään, markkinoimaan ja ilahduttaa kävijöitäsi paremmin. Koska aloitussivut ovat kriittisiä tuloksille, on tärkeää varmistaa, että ne on suunniteltu, suunniteltu ja toteutettu hyvin. Tässä on muutamia asioita, jotka on otettava huomioon luotaessa kohdistettuja sivut: Houkutteleva estetiikka: Vain aloitussivusi väri ja puhdas käyttöliittymä voivat auttaa. Vierailijat haluavat oppia lisää tuotteistasi ja nähdä todisteita tarjoamastasi arvosta. Katso Inbound Emotion -luettelomme sijaa 10 saadaksesi loistavan esimerkin mahtavasta verkkosivusta.
Vähemmän on enemmän: Anna lauseen tai kuvien puhua suurimmasta osasta, mutta muista sisällyttää mukaan kaikki kuvaavat otsikot ja tukiteksti, jotta aloitussivusi olisi selkeä ja vakuuttava. Tämä koskee melkein kaikkia sivun osia: välilyöntejä, yksinkertaisia kopioita ja lyhyempiä lomakkeita.
Kotisivun suunnittelu
Pidä vierailijat sivulla: poistamalla päänavigaattorin tai häiritsevät käänteiset linkit, on vähemmän todennäköistä, että kävijät jättävät sivusi liidien luomiseen.
Jakaminen sosiaalisessa mediassa. Helppo tapa houkutella kävijöitä aloitussivullesi on käyttää jakopainikkeitasosiaaliset verkostot, jotta he voivat jakaa sisältöäsi sosiaalisen median seuraajilleen. Loppujen lopuksi asiakkaat ovat markkinointisi vauhtipyöräsi keskipiste.
A/B-testaus: Aloitussivut ovat tärkeitä toimiakseen kunnolla, ja koska kuluttajapsykologia voi joskus olla yllättävää, on aina parasta kokeilla eri versioita sivuistasi nähdäksesi, millä konversioprosentti (CVR) on korkein. Tarkista tarjouksen sijainti, toimintakehotustyypit tai jopa värimaailma.
Toimintakehotus: toimintakehotus, jossa liha on aloitussivulla tai käännekohta, jossa on mahdollisuus tulla kontakteiksi. Toimintakehot voivat pyytää kävijöitä tilaamaan, lataamaan, täyttämään lomakkeen tai jakamaan sosiaaliset verkostot jne., mutta yleensä toimintakehotukset ovat välttämättömiä yleisön sitouttamiseksi aktiivisemmin tarjoukseesi. Liidien luomiseksi toimintakehotusten on oltava rohkeita ja mukaansatempaavia, mutta mikä tärkeintä, niiden on välitettävä arvoa tehokkaasti.
Jätä kommentti