Kauniit aloitussivut Vinkkejä ja esimerkkejä

Aloitussivujen ympärille on kirjoitettu satoja nokkelia artikkeleita. Me kaikki tiedämme perustiedot - että ne ovat sivuja, jotka kävijä saavuttaa klikkaamalla bannerimainosta tai mainoslinkkiä, ja että niillä on ratkaiseva markkinointitehtävä muuntamalla johtajat liiketoiminnaksi asiakkaiksi. Kun aloitat aloitussivun suunnittelun itse, asiat näyttävät kuitenkin olevan herkempiä kuin olisit odottanut, kun olet käynyt läpi dokumentaation. Tämän vuoksi olemme tänään päättäneet jakaa inspiraatiota varten kokoelman todellisista aloitussivun esimerkkeistä.

Wikipediassa löytyy melko tieteellinen luokitus, ja aloitussivut kuuluvat kahteen pääluokkaan: viittaus ja tapahtuma. Jos niitä kutsutaan viittauksiksi, sivuilla on näytettävä tiedot, jotka ovat sekä houkuttelevia että vierailijalle tärkeitä (teksti, multimedia). "Transactional" aloitussivut ovat niitä, jotka pyrkivät välitöntä myyntiä tai ainakin vangitsemaan vahvoja myyntijohtoja.

Koska olet todennäköisesti samaa mieltä kanssani, kaikki aloitussivut täyttävät molemmat kriteerit: ne ilmoittavat vierailijalle tarjouksesta ja houkuttelevat toimia hänen puoleltaan. Muussa tapauksessa emme tarvitsisi kutsuja toimintaan missään aloitussivulla, olisimme?

Ennen kuin aloitussivun käynnistäminen www-sivustossa on selvää, on toivottujen kävijöiden toiminnan luonne. Kasvaa uutiskirjeen kirjautumista tavoitteeseesi? Suunnittele sitten CTA viestillä "Rekisteröidy nyt uutiskirjeemme". Haluatko saada kokeiluversioita kävijöiltä? Sano niin. Yleisesti ottaen keskeinen resepti on tehdä aloitussivusi ilmaista tämä tarjous mahdollisimman selkeästi ja houkuttelevasti.

Vinkkejä aloitussivun suunnitteluun

Muutamia nopeita vinkkejä aloitussivun suunnittelusta:

1. Käytä AIDA-periaatetta

Tämä on tapahtumaketju, jonka haluamme tapahtua, kun johtaja saavuttaa mainostetun tuotteen tai palvelun esittävän alustan. Pääasiassa vaiheet ovat:

tietoisuus - houkutella huomiota kävijältä
Kiinnostuksen kohde - mikä voidaan herättää korostamalla asiakkaalle koituvia etuja
Himoita - kannustaa asiakkaita ajatukseen, että he haluta tuotteen tai palvelun
Toiminta - ostoprosessia suorittavat asiakkaat

2. Ei liikaa häiriötekijöitä; jätä tie ulos

Ajatus on yksinkertainen. Jos aloitussivulla ei ole käytännössä navigointivaihtoehtoa CTA-painiketta lukuun ottamatta, kävijät pakottavat niiden poistumisen. Älä ajattele, että jos et tarjoa navigointia, he eivät löydä tapaa lähteä - he voivat ehkä jopa sammuttaa selaimen. Ja nämä kävijät ei tule takaisin.

3. Tee se välähdystestistä

Tavallisesti aloitussivun on kiinnitettävä kävijän huomio ensimmäisten 3 sekunnin aikana. Jos vieras vilkkuu ja ei näe selkeästi, mitä hänen pitäisi löytää sivulta tai jos hän ei ole kiinnostunut siitä, mitä hän näki, hän todennäköisesti kaataa tyhjän käden.

4. Älä luo vääriä odotuksia

Aloitussivun on oltava yhdenmukainen alkuperäisen mainoksen antamien vihjeiden kanssa tai päinvastoin. Vierailijoiden on löydettävä aloitussivulta, mitä heille luvattiin ensimmäisessä mainoksessa, jota he napsauttivat.

Kuten olemme luvanneet, tutustumme hienosti suunniteltuihin ja tehokkaisiin B2B- ja B2C-aloitussivuihin. Tutkimme niiden vahvuuksia ja väistämättömiä heikkouksia. Pidä alla seuraavista gallerioista: visuaalinen viestintä, tuotemerkin ja luottamuksen indikaattorit, sisällön tehokkuus, toimintakutsut.

Showcase: Kaunis aloitussivut

99designs

Tämä on aloitussivun versio, joka on suunnattu suunnittelijoille ja opiskelijoille. 99Designsilla on myös toiselle puolelle aloitussivu: malleja tarvitsevat yritykset. Mitä tulee tähän, se on erittäin tehokas hyväksynnän kannalta (katso rohkeita suosituksia) ja puhuu todellakin yleisön kieltä lukujen ja luottamusindikaattoreiden avulla (yhteisön jäsenten lukumäärä, ansaitun rahan määrä). Huomaa yhden CTA-painikkeen kirkkaan punainen sävy - tämä on yleensä jotain, jota on vältettävä, mutta tässä tapauksessa se ei ole häiritsevää, koska se vastaa logon väriä.

123RF

123RF tekee selkeän käyttötarkoituksen tässä aloitussivulla kuvan liukusäätimellä ja neljällä mediaanilaatikolla. Ymmärrät hetkessä, mitä palvelu on ja miten sitä voi käyttää (haku, rekisteröinti, maksulliset maksut, ostotilaus). Vaaleanharmaa tausta on huomaamaton ja tuo korostuksen olemukseen, joka on kuva. Se mitä henkilökohtaisesti uskoo voivansa parantaa, on lista valokuvakategorioista, se on hieman täytetty. Ja CTA on hieman liian hienovarainen napsautettaville laatikoille.

Favomatic

Rakastan ehdottomasti tämän aloitussivun suunnittelua. Jokaisessa osassa on kontrastia, hyviä iskulauseita, ja se tuo paljon tietoa pakottamatta sinua lukemaan kaikkea (pieni fontti tekee kaiken). Siinä on navigointi, mutta pystysuora, vierittämällä, mikä vähentää huomattavasti pomppimismääriä.

BiznessApps

Vahva toimintakehotus, korostettu iskulause ja vaikuttava luettelo hyväksynnöistä - tämä on oikea yhdistelmä aloitussivulle ja tällä sivulla. Lisäksi se sisältää vähimmäismäärän tekstiä ja käyttää demovideota, koska se on tunnettu tosiasia, että ihmiset mieluummin katsovat lyhytelokuvaa kuin lukemista. Lomake on elementti, jota he voivat hieman parantaa. Yleensä sinun pitäisi antaa ensin, ennen kuin saat, joten jos vastine lomakkeen lähettämisestä voi saada ilmaisia herkkuja, niin "Lähetä viesti" -painikkeella voi sanoa jotain "Hanki nyt ilmaiseksi!"

Brusheezy

Toinen todiste vähemmän on enemmän. Tämä aloitussivu näyttää erittäin siistiltä yhden kuvakkeen ja näkyvän otsikon kanssa. Huomaa kaksi kutsua toimiin, ylä- ja alareunassa - tämä on typerää menetelmää, jonka avulla viesti pysyy pysyvänä ilman, että sivu on liian täynnä. Toinen haitta on asiakkaiden etujen korostaminen tuotteen ominaisuuksien sijasta.

Karkaaminen

Tämä sivu voi olla hieman liian täynnä, mutta se on perinteisten sovellusten aloitussivujen perinne. Päätös jakaa sivu segmenteissä helpottaa kaikkien elementtien navigointia. Löydät kaiken, mitä etsit: ominaisuudet, edut, suositukset ja jopa takuu, jos et ole tyytyväinen tulokseen. Viimeinen on varsin riskialtista, koska se voi herättää kysymyksiä palvelun laadusta, ja se oli hyvä ajatus sijoittaa se kokonaan alareunaan

PageLines

Minimalismi on tässä keskeinen käsite. Haluaisin henkilökohtaisesti, että tämä sivu ei kerro sinulle mitään heti, mutta kutsuu sinut tutustumaan. Mitä en löydä niin nautittavaa, on kuitenkin video, joka käynnistyy automaattisesti (ominaisuus, jota en yleensä välttä) - vaikka Andrew Powers ei ole vain taitava vaan myös komea! Myös se, että CTA: ta ei ole, voi olla haittapuoli verkkosivustolle.

Pico

Tämä aloitussivu on yksinkertainen mutta tehokas. Punaisempi merkki on suurempi kuin suola ja pippuri. Kappalejärjestely muistuttaa sanomalehtisuunnittelua ja on varsin viittaava CMS: n tarkoitukseen. CTA-painikkeet ovat kuitenkin hieman liian heikkoja, ja oikeassa alakulmassa oleva nainen aiheuttaa lievän distractinin; hän on yllättynyt hänen kasvoillaan, näyttääkö hän siltä, että hän pystyy neuvottelemaan liiketoimintaa?

Shoeboxed

Kunkin jakson kuvaileva rivi on esimerkki kuvaavasta kielenkäytöstä. Ymmärrät viestin sekunnin välein, koska näkökenttäsi skannaa nopeasti ensimmäisen rivin ja saapuu CTA-painikkeeseen. Jos olet edelleen epäröimässä, on olemassa suositus auttaa, yhdessä vahvojen vahvistusten kanssa - ettet luota Forbesissa ja Tech Crunchissa esiintyvään yritykseen? minä voisin.

Squarespace

Ammatillinen näköinen aloitussivu, tämä on. Lihavoitu iskulause, CTA-painikkeet, joita et voi vastustaa klikkausta ja erittäin hyvä hyväksyntä, on yhdistelmä menestykseen. Pidän myös siitä, että he asettavat käyttötarkoituksensa sivun keskelle, jossa on kuvakaappaus siitä, miten niiden sivut näyttävät ja infografiset merkinnät. Sivun 3-elementtinen rakenne on toinen vahvuus.

Toimittajan huomautus: Tämä viesti on kirjoittanut Laura Moisei varten Hongkiat.com. Lauralla on kommunikaatiotieteiden kandidaatin tutkinto, ja hän viettää suurimman osan ajasta hänen intohimonsa suunnitteluun ja kirjoittamiseen. Hän työskentelee 123ContactFormilla, online-lomakkeella ja kyselyn rakentajalla, joka auttaa käyttäjiä luomaan kauniita lomakkeita mihin tahansa verkkosivuun.