Pientä harmaata tekstiä sekavalla taustalla. Silmät väsyvät jo ensimmäisen lauseen aikana. Siksi above the fold on tärkeää brändillesi. Kun asettelu ja värit taistelevat viestiä vastaan, ihmiset lähtevät kertomatta syytä.
Above the fold on sisältö, joka näkyy ennen vierittämistä tietyllä näytön koolla. 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 etusivun suunnittelu liittyy samaan kokonaisuuteen. Käydään se läpi vaihe vaiheelta.
Mitä on above the fold ja miksi se on tärkeää
Above the fold on sisältö, joka näkyy ennen vierittämistä tietyllä näytön koolla.
Käytännössä above the fold näkyy verkkosivustosi yläosissa, palvelusivuilla, some-grafiikoissa ja painetuissa materiaaleissa. Kun osaat nimetä asian oikein, voit briefata suunnittelijoita nopeammin ja arvioida luonnoksia varmemmin.
Lähiaiheet, kuten etusivun suunnittelu, liittyvät suoraan tähän. Pidä ne mielessä, kun luet moduulin loppuosan.
Se luo ensivaikutelman ja ratkaisee, jatkavatko kävijät lukemista.
Miksi above the fold on tärkeää yrityksellesi?
Asiakkaat arvioivat uskottavuuden asettelusta ennen kuin lukevat joka sanan. Selkeä visuaalinen rakenne vähentää kitkaa ja tekee tarjouksista helpommin ymmärrettäviä.
Etusivun suunnittelussa taitteen yläpuolinen sisältö on käsiteltävä eri tavalla mobiilissa ja työpöydällä.
Tarkista taitteen yläpuolinen osa usealla puhelinkoolla, älä vain kannettavallasi.
Jos haluat nähdä, miten tämä liittyy lähiaiheisiin, lue seuraavaksi miten suunnittelet laskeutumissivun ja laskeutumissivun suunnittelun parhaat käytännöt.
Käytännön tarkistuslista tälle päivälle
Tarkista taitteen yläpuolinen osa usealla puhelinkoolla, älä vain kannettavallasi.
Kun käyt sivua läpi, kysy, näkyykö above the fold 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 above the fold -osan tuloksia sivustollasi.
Jaa tämä lista kaikille, jotka päivittävät sivustoasi, jotta etusivun suunnittelu 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. Etusivun suunnittelussa taitteen yläpuolinen sisältö on käsiteltävä eri tavalla mobiilissa ja työpöydällä.
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 painikkeiden suunnittelu vertaillaksesi muistiinpanoja tämän moduulin toiseen lukuun.
Se luo ensivaikutelman ja ratkaisee, jatkavatko kävijät lukemista.
Kysymykset, jotka usein jäävät huomaamatta
Lisätermit, kuten etusivun suunnittelu ja verkkosivuston ylätunniste, auttavat etsimään syvempiä esimerkkejä ja vertaamaan työtäsi yleisiin standardeihin.
Etusivun suunnittelussa taitteen yläpuolinen sisältö on käsiteltävä eri tavalla mobiilissa ja työpöydällä.
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 above the fold -osasta, 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 miten suunnittelet laskeutumissivun ja laskeutumissivun suunnittelun parhaat käytännöt, jotta moduuli pysyy mielessäsi yhtenäisenä.
Sinulla on nyt toimiva näkökulma above the fold -osaan. Käytä sitä, kun käyt läpi sivustoasi, hyväksyt markkinointimateriaaleja tai briefaat suunnittelijaa. Jatka lukuihin laskeutumissivun suunnittelun parhaat käytännöt ja painikkeiden suunnittelu, niin vauhti säilyy tässä moduulissa.
Usein kysytyt kysymykset
Kuinka kauan above the fold -osan 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 above the fold -osaan?
Suunnittelijasta on apua monimutkaisissa brändiuudistuksissa, mutta moni above the fold -osaan liittyvä korjaus onnistuu itse, kun tiedät, mitä etsiä. Käytä lukua miten suunnittelet laskeutumissivun tämän luvun rinnalla.
Voiko WEMASY auttaa above the fold -osan toteutuksessa 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 above the fold -osassa?
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 laskeutumissivun suunnittelun parhaat käytännöt.
Miten above the fold 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 above the fold -osan jälkeen?
Jatka lukuihin miten suunnittelet laskeutumissivun ja laskeutumissivun suunnittelun parhaat käytännöt tässä kirjassa, niin rakennat brändillesi kokonaisen visuaalisen järjestelmän verkkoon.