Miksi jotkin brändit vaikuttavat heti luotettavilta, kun toiset tuntuvat amatöörimäisiltä hyvistä tuotteista huolimatta? Osa vastausta on verkkosivuston ylätunniste. Et tarvitse suunnittelijan tutkintoa kehittyäksesi. Tarvitset selkeän määritelmän ja muutaman käytännön tarkistuksen.
Verkkosivuston ylätunnisteen suunnitteluun kuuluvat logon sijoittelu, navigointi ja avaintoiminnot, jotka näkyvät sivun yläreunassa. 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 verkkosivuston navigointi liittyy samaan kokonaisuuteen. Käydään se läpi vaihe vaiheelta.
Mitä verkkosivuston ylätunniste tarkoittaa käytännössä
Verkkosivuston ylätunnisteen suunnitteluun kuuluvat logon sijoittelu, navigointi ja avaintoiminnot, jotka näkyvät sivun yläreunassa.
Ylätunniste toistuu jokaisella sivulla, joten selkeys tässä kantaa hedelmää koko sivustolla.
Ylätunnisteen navigoinnin pitäisi pysyä lyhyenä ja ennustettavana.
Näin sovellat verkkosivuston ylätunnistetta omalla sivustollasi
Rajoita ylätason valikkokohdat seitsemään tai alle, kun se on mahdollista.
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 verkkosivuston alatunnisteen suunnittelu perustaksi ja etusivun suunnittelu moduulin seuraavaksi askeleeksi.
Käytännön tarkistuslista tälle päivälle
Rajoita ylätason valikkokohdat seitsemään tai alle, kun se on mahdollista.
Kun käyt sivua läpi, kysy, näkyykö verkkosivuston ylätunniste 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 ylätunnisteen tuloksia sivustollasi.
Jaa tämä lista kaikille, jotka päivittävät sivustoasi, jotta verkkosivuston navigointi 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. Ylätunnisteen navigoinnin pitäisi pysyä lyhyenä ja ennustettavana.
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 etusivun suunnittelu vertaillaksesi muistiinpanoja tämän moduulin toiseen lukuun.
Ylätunniste toistuu jokaisella sivulla, joten selkeys tässä kantaa hedelmää koko sivustolla.
Kysymykset, jotka usein jäävät huomaamatta
Lisätermit, kuten verkkosivuston navigointi ja above the fold, auttavat etsimään syvempiä esimerkkejä ja vertaamaan työtäsi yleisiin standardeihin.
Ylätunnisteen navigoinnin pitäisi pysyä lyhyenä ja ennustettavana.
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 verkkosivuston ylätunnisteesta, 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 verkkosivuston alatunnisteen suunnittelu ja verkkosivuston navigointi, jotta moduuli pysyy mielessäsi yhtenäisenä.
Sinulla on nyt toimiva näkökulma verkkosivuston ylätunnisteeseen. Käytä sitä, kun käyt läpi sivustoasi, hyväksyt markkinointimateriaaleja tai briefaat suunnittelijaa. Jatka lukuihin verkkosivuston navigointi ja etusivun suunnittelu, niin vauhti säilyy tässä moduulissa.
Verkkosivuston ylätunniste on taito, joka kehittyy vähitellen. Palaa tähän lukuun, kun olet julkaissut yhden parannuksen, jotta ideat siirtyvät lukemisesta tavaksi. Pienet toistuvat tarkistukset toimivat paremmin kuin kaikkien sääntöjen ahtaminen päähän kerralla. Kirjaa muistiin, mikä toimi yleisöllesi, niin seuraava päivitys käy nopeammin.
Usein kysytyt kysymykset
Kuinka kauan verkkosivuston ylätunnisteen 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 verkkosivuston ylätunnisteeseen?
Suunnittelijasta on apua monimutkaisissa brändiuudistuksissa, mutta moni ylätunnisteeseen liittyvä korjaus onnistuu itse, kun tiedät, mitä etsiä. Käytä lukua verkkosivuston alatunnisteen suunnittelu tämän luvun rinnalla.
Voiko WEMASY auttaa verkkosivustosi ylätunnisteen toteutuksessa?
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 verkkosivuston ylätunnisteessa?
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 verkkosivuston navigointi.
Miten verkkosivuston ylätunniste 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 verkkosivuston ylätunnisteen jälkeen?
Jatka lukuihin verkkosivuston alatunnisteen suunnittelu ja verkkosivuston navigointi tässä kirjassa, niin rakennat brändillesi kokonaisen visuaalisen järjestelmän verkkoon.