Yksi kilpailija näyttää viimeistellyltä joka näytöllä. Toinen näyttää ahtaalta ja vanhanaikaiselta, vaikka molemmat myyvät samanlaisia palveluja. Ero johtuu yleensä etusivun suunnittelusta ja sen takana olevista tavoista. Huomaat eron heti, vaikka et osaisi vielä nimetä jokaista sääntöä.
Etusivun suunnittelun pitäisi kertoa sekunneissa, ketä autat, mitä tarjoat ja mikä on seuraava askel. Tässä luvussa kerrotaan selkeästi, mitä se tarkoittaa, miksi se vaikuttaa verkkosivustoosi ja markkinointiisi ja miten sitä sovelletaan ilman jargonia. Näet myös, miten above the fold liittyy samaan kokonaisuuteen. Käydään se läpi vaihe vaiheelta.
Mitä etusivun suunnittelu tarkoittaa käytännössä
Etusivun suunnittelun pitäisi kertoa sekunneissa, ketä autat, mitä tarjoat ja mikä on seuraava askel.
Konversioon tähtäävillä etusivuilla todisteet ja toimintakehotteet toistuvat koko vierityksen ajan.
Above the fold -sisältö kantaa suurimman konversiotaakan.
Näin sovellat etusivun suunnittelua omalla sivustollasi
Aseta yksi pääpainike pääosioon ja toista se sosiaalisen todistuksen jälkeen.
Aloita yhdestä sivusta, kuten etusivusta tai pääasiallisesta laskeutumissivusta. Korjaa suurin ongelma ensin ja vie sama malli sitten muihin pohjiin.
Yhdistä tämä luku lukuihin above the fold perustaksi ja laskeutumissivun suunnittelun parhaat käytännöt moduulin seuraavaksi askeleeksi.
Käytännön tarkistuslista tälle päivälle
Aseta yksi pääpainike pääosioon ja toista se sosiaalisen todistuksen jälkeen.
Kun käyt sivua läpi, kysy, näkyykö etusivun suunnittelu jo ensimmäisellä vierityksellä mobiilissa. Jos ei, järjestä osiot uudelleen, ennen kuin viimeistelet yksityiskohtia.
Ota kuvakaappaukset ennen muutoksia ja niiden jälkeen, jotta näet, mikä muutti etusivun tuloksia sivustollasi.
Jaa tämä lista kaikille, jotka päivittävät sivustoasi, jotta above the fold pysyy yhtenäisenä uusilla sivuilla.
Valitse yksi mittari seurattavaksi tässä kuussa, esimerkiksi sivulla vietetty aika tai lomakkeen aloitukset. Näin suunnittelumuutokset liittyvät liiketoiminnan tuloksiin eivätkä pelkkään makuun.
Miten tämä aihe liittyy laajempaan brändiisi
Visuaaliset valinnat eivät yleensä pysy yhdellä sivulla. Above the fold -sisältö kantaa suurimman konversiotaakan.
Somejulkaisujesi, sähköpostiesi ja painettujen materiaalien kannattaa toistaa samaa hierarkiaa, värejä ja kirjasinsääntöjä kuin verkossa.
Kun brändin visuaalit alkavat ajautua erilleen, asiakkaat aistivat pienen epäsuhdan, vaikka eivät osaisi selittää sitä.
Käytä lukua laskeutumissivun suunnittelun parhaat käytännöt vertaillaksesi muistiinpanoja tämän moduulin toiseen lukuun.
Konversioon tähtäävillä etusivuilla todisteet ja toimintakehotteet toistuvat koko vierityksen ajan.
Kysymykset, jotka usein jäävät huomaamatta
Lisätermit, kuten above the fold ja verkkosivuston asettelu, auttavat etsimään syvempiä esimerkkejä ja vertaamaan työtäsi yleisiin standardeihin.
Above the fold -sisältö kantaa suurimman konversiotaakan.
Kirjoita ylös yksi ennen ja jälkeen -muutos, jonka testaat toimivalla sivulla tällä viikolla. Pienet mitatut muutokset voittavat epämääräiset suunnitelmat.
Kun tiimilläsi on yhteinen sanasto etusivun suunnittelusta, korjauskierroksia tulee vähemmän suunnittelijoiden ja toimistojen kanssa.
Työkalut, joilla visuaaliset päivitykset sujuvat helpommin
Monen asettelu- ja tyyliongelman korjaaminen ei vaadi omaa koodia. Visuaalisella editorilla säädät välit, värit ja typografian ja esikatselet samalla mobiili- ja työpöytänäkymät.
WEMASYn Sivustonrakentajassa on visuaalinen muokkaus, joten voit julkaista muutokset odottamatta kehittäjää jokaisen pienen säädön takia. Avaa Sivustonrakentaja, kun olet valmis soveltamaan oppimaasi.
Kun julkaiset päivityksiä, tarkista uudelleen luvut above the fold ja miten suunnittelet laskeutumissivun, jotta moduuli pysyy mielessäsi yhtenäisenä.
Sinulla on nyt toimiva näkökulma etusivun suunnitteluun. Käytä sitä, kun käyt läpi sivustoasi, hyväksyt markkinointimateriaaleja tai briefaat suunnittelijaa. Jatka lukuihin miten suunnittelet laskeutumissivun ja laskeutumissivun suunnittelun parhaat käytännöt, niin vauhti säilyy tässä moduulissa.
Usein kysytyt kysymykset
Kuinka kauan etusivun suunnittelun parantaminen kestää?
Useimmat pienyritykset näkevät selkeämpiä sivuja muutaman keskittyneen jakson jälkeen, kun soveltavat tämän luvun perusteita. Aloita etusivusta ja vie samat säännöt sitten palvelu- ja yhteystietosivuille.
Tarvitsetko suunnittelijan etusivun suunnitteluun?
Suunnittelijasta on apua monimutkaisissa brändiuudistuksissa, mutta moni etusivun suunnitteluun liittyvä korjaus onnistuu itse, kun tiedät, mitä etsiä. Käytä lukua above the fold tämän luvun rinnalla.
Voiko WEMASY auttaa etusivun suunnittelussa verkkosivustollasi?
WEMASYn Sivustonrakentajassa on visuaalinen editori, jolla säädät asettelua, värejä ja typografiaa ilman koodia. Avaa Sivustonrakentaja, niin voit päivittää mallit ja esikatsella muutokset mobiilissa.
Mikä on yleisin virhe etusivun suunnittelussa?
Ihmiset yrittävät korjata kaiken kerralla sen sijaan, että etenisivät yksi sivu kerrallaan. Valitse yksi ykkösasia, kuten luettavuus tai kontrasti, ja katso sitten seuraavaa parannusta varten lukua miten suunnittelet laskeutumissivun.
Miten etusivun suunnittelu liittyy SEO:hon?
Selkeä visuaalinen hierarkia ja luettava teksti pitävät kävijät sivulla pidempään, mikä tukee hakukoneiden seuraamia sitoutumissignaaleja. Yhdistä suunnittelukorjaukset hyvään sisältörakenteeseen, niin tulokset ovat parhaat.
Mitä kannattaa opiskella seuraavaksi etusivun suunnittelun jälkeen?
Jatka lukuihin above the fold ja miten suunnittelet laskeutumissivun tässä kirjassa, niin rakennat brändillesi kokonaisen visuaalisen järjestelmän verkkoon.