Päivität etusivuasi myöhään tiistai-iltana. Otsikko on hyvä, kuvat ovat hyviä, mutta kävijät lähtevät silti parissa sekunnissa. Alat miettiä, onko fonttihierarkia se, minkä olet ohittanut. Usein on. Pienet visuaaliset ratkaisut muovaavat ensivaikutelmaa nopeammin kuin useimmat yrittäjät osaavat odottaa.
Fonttihierarkia näyttää koon, painon ja välien avulla, mikä teksti on tärkeintä. Tässä luvussa kerrotaan selkeästi, mitä se tarkoittaa, miksi se vaikuttaa verkkosivustoosi ja markkinointiisi ja miten sitä käytetään ilman ammattisanojen sekamelskaa. Näet myös, miten visuaalinen hierarkia kuuluu samaan kokonaisuuteen. Edetään askel kerrallaan.
Mikä on fonttihierarkia ja miksi se on tärkeä
Fonttihierarkia näyttää koon, painon ja välien avulla, mikä teksti on tärkeintä.
Käytännössä fonttihierarkia näkyy sivustosi otsikoissa, palvelusivuilla, some-grafiikoissa ja painotuotteissa. Kun osaat nimetä sen oikein, ohjeistat suunnittelijoita nopeammin ja arvioit luonnoksia varmemmin.
Aiheeseen liittyvät asiat, kuten visuaalinen hierarkia, kytkeytyvät suoraan tähän. Pidä ne mielessä, kun luet osion muut luvut.
Selkeä hierarkia auttaa silmäilijää löytämään otsikot, väliotsikot ja toimintakehotukset nopeasti.
Miksi fonttihierarkia on tärkeä yrityksellesi?
Asiakkaat arvioivat uskottavuutta asettelusta jo ennen kuin lukevat jokaisen sanan. Selkeä visuaalinen rakenne vähentää kitkaa ja tekee tarjouksista helpommin ymmärrettäviä.
Sivun visuaalinen hierarkia riippuu paljon typografian tasoista.
Määritä H1-H3-tyylit kerran ja käytä niitä uudelleen jokaisessa pohjassa.
Jos haluat nähdä, miten tämä liittyy lähiaiheisiin, lue seuraavaksi typografia verkkosuunnittelussa ja fonttityypit.
Käytännön tarkistuslista tälle päivälle
Määritä H1-H3-tyylit kerran ja käytä niitä uudelleen jokaisessa pohjassa.
Kun katsot mitä tahansa sivua, kysy, näkyykö fonttihierarkia jo ensimmäisellä vierityksellä puhelimessa. Jos ei, järjestä osiot uudelleen, ennen kuin alat hioa yksityiskohtia.
Tallenna kuvakaappaukset ennen muutoksia ja niiden jälkeen, jotta näet, mikä muutos auttoi fonttihierarkian kanssa sivustollasi.
Jaa tämä lista kaikille, jotka päivittävät sivustoasi, jotta visuaalinen hierarkia pysyy yhtenäisenä uusillakin sivuilla.
Valitse tälle kuukaudelle yksi seurattava mittari, esimerkiksi sivulla vietetty aika tai lomakkeen aloitukset. Silloin ulkoasun muutokset kytkeytyvät liiketoiminnan tuloksiin eivätkä pelkkään makuun.
Miten tämä aihe liittyy laajempaan brändiisi
Visuaaliset valinnat eivät yleensä elä vain yhdellä sivulla. Sivun visuaalinen hierarkia riippuu paljon typografian tasoista.
Some-julkaisujesi, sähköpostiesi ja painotuotteidesi kannattaa noudattaa samaa hierarkiaa, samoja värejä ja samoja kirjasinsääntöjä kuin verkossa.
Kun brändin visuaalinen ilme alkaa lipsua, asiakkaat tuntevat hienoisen epäsuhdan, vaikka eivät osaisi selittää sitä.
Lue typografian säännöt, niin voit verrata muistiinpanojasi tämän osion toiseen lukuun.
Selkeä hierarkia auttaa silmäilijää löytämään otsikot, väliotsikot ja toimintakehotukset nopeasti.
Kysymykset, jotka usein jäävät huomaamatta
Lisähakusanat, kuten visuaalinen hierarkia ja typografian säännöt, auttavat löytämään syvällisempiä esimerkkejä ja vertaamaan työtäsi yleisiin standardeihin.
Sivun visuaalinen hierarkia riippuu paljon typografian tasoista.
Kirjoita ylös yksi ennen ja jälkeen -muutos, jonka testaat tällä viikolla julkaistulla sivulla. Pienet mitatut muutokset voittavat epämääräiset suunnitelmat.
Kun tiimilläsi on yhteinen sanasto fonttihierarkiasta, suunnittelijoiden ja toimistojen kanssa tarvitaan vähemmän korjauskierroksia.
Työkalut, jotka tekevät visuaalisista päivityksistä helpompia
Moniin asettelun ja tyylin ongelmiin et tarvitse omaa koodia. Visuaalisessa editorissa voit säätää välejä, värejä ja kirjasimia ja esikatsella samalla puhelin- ja tietokonenäkymää.
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 typografia verkkosuunnittelussa ja fonttityypit, jotta osio pysyy yhtenä kokonaisuutena mielessäsi.
Sinulla on nyt toimiva näkökulma fonttihierarkiaan. Käytä sitä, kun käyt läpi sivustoasi, hyväksyt markkinointiaineistoja tai ohjeistat suunnittelijaa. Jatka lukuihin fonttityypit ja typografian säännöt, niin vauhti säilyy tässä osiossa.
Usein kysytyt kysymykset
Kauanko fonttihierarkian parantaminen kestää?
Useimmat pienyritykset saavat sivunsa selkeämmiksi muutamassa keskittyneessä työvaiheessa, kun käyttävät tämän luvun perusasioita. Aloita etusivusta ja vie samat säännöt sitten palvelu- ja yhteystietosivuille.
Tarvitsetko suunnittelijan fonttihierarkiaan?
Suunnittelijasta on apua isoissa brändiuudistuksissa, mutta moni fonttihierarkiaan liittyvä korjaus onnistuu itse, kun tiedät, mitä katsoa. Lue tämän luvun rinnalla typografia verkkosuunnittelussa, niin saat aiheesta lisää.
Voiko WEMASY auttaa fonttihierarkian käyttöönotossa verkkosivustollasi?
WEMASYn Sivustonrakentajassa on visuaalinen editori, jolla voit säätää asettelua, värejä ja kirjasimia ilman koodia. Avaa Sivustonrakentaja, niin voit päivittää pohjia ja esikatsella muutoksia puhelimessa.
Mikä on yleisin virhe fonttihierarkiassa?
Ihmiset yrittävät korjata kaiken kerralla sen sijaan, että etenisivät yksi sivu kerrallaan. Valitse yksi tärkein asia, kuten luettavuus tai kontrasti, ja katso sitten fonttityypit seuraavaa parannusta varten.
Miten fonttihierarkia liittyy SEO:hon?
Selkeä visuaalinen hierarkia ja luettava teksti pitävät kävijät pidempään sivulla, mikä tukee merkkejä, joita hakukoneet seuraavat. Yhdistä ulkoasun korjaukset toimivaan sisältörakenteeseen, niin tulos on paras.
Mitä kannattaa lukea seuraavaksi fonttihierarkian jälkeen?
Jatka tämän kirjan luvuilla typografia verkkosuunnittelussa ja fonttityypit, niin rakennat brändillesi kokonaisen visuaalisen järjestelmän verkkoon.