Yksi kilpailija näyttää huolitellulta joka näytöllä. Toinen näyttää ahtaalta ja vanhentuneelta, vaikka molemmat myyvät samanlaisia palveluja. Ero johtuu yleensä typografiasta verkkosuunnittelussa ja sen takana olevista tavoista. Huomaat eron heti, vaikka et vielä osaisi nimetä jokaista sääntöä.
Typografia verkkosuunnittelussa vaikuttaa luottamukseen, ymmärtämiseen ja sivulla vietettyyn aikaan. Tässä luvussa kerrotaan arkikielellä, mitä se tarkoittaa, miksi se vaikuttaa verkkosivustoosi ja markkinointiisi ja miten voit käyttää sitä ilman jargonia. Näet myös, miten fonttien luettavuus liittyy samaan kokonaisuuteen. Käydään asia läpi askel askeleelta.
Millaista on vahva typografia verkkosuunnittelussa
Typografia verkkosuunnittelussa vaikuttaa luottamukseen, ymmärtämiseen ja sivulla vietettyyn aikaan.
Luettava teksti vähentää tukikysymyksiä, jotka johtuvat väärin ymmärretyistä ohjeista.
Fonttien luettavuuden parannukset nostavat usein lomakkeiden täyttöasteita.
Mitä korjata ensin
Tarkista ensin lomakkeet ja kassasivut, koska kirjasinvirheet maksavat niissä tulonmenetyksenä.
Ota sivustasi kuvakaappaus puhelimella ja tietokoneella ja merkitse kolme ensimmäistä kohtaa, jotka sekoittavat tai hidastavat sinua.
Käytä sivua typografian säännöt tarkistuslistana, kun käyt parannuksia läpi.
Käytännön tarkistuslista, jonka voit ottaa käyttöön heti
Tarkista ensin lomakkeet ja kassasivut, koska kirjasinvirheet maksavat niissä tulonmenetyksenä.
Kun katsot mitä tahansa sivua, kysy, näkyykö typografia verkkosuunnittelussa onnistuneena jo ensimmäisellä vierityksellä puhelimessa. Jos ei, järjestä osiot uudelleen ennen kuin viimeistelet yksityiskohtia.
Tallenna kuvakaappaukset ennen muutoksia ja niiden jälkeen, jotta näet, mikä muutos auttoi typografiassa sivustollasi.
Jaa tämä lista kaikille, jotka päivittävät sivustoasi, jotta fonttien luettavuus pysyy yhtenäisenä uusillakin sivuilla.
Valitse tälle kuukaudelle yksi seurattava mittari, kuten sivulla vietetty aika tai lomakkeen aloitukset. Näin muutokset liittyvät liiketoiminnan tuloksiin eivätkä pelkkään makuun.
Miten aihe liittyy laajempaan brändiisi
Visuaaliset valinnat harvoin koskevat vain yhtä sivua. Fonttien luettavuuden parannukset nostavat usein lomakkeiden täyttöasteita.
Some-julkaisujesi, sähköpostiesi ja painotuotteidesi pitäisi toistaa samaa hierarkiaa, samoja värejä ja samoja kirjasinsääntöjä kuin verkossa.
Kun brändin visuaalinen ilme alkaa hajota, asiakkaat tuntevat pienen epäsuhdan, vaikka eivät osaisi selittää sitä.
Lue Google Fonts verkkosivustoille, niin voit verrata muistiinpanojasi tämän osion toiseen lukuun.
Luettava teksti vähentää tukikysymyksiä, jotka johtuvat väärin ymmärretyistä ohjeista.
Kysymykset, jotka usein unohtuvat
Lisähakusanat, kuten fonttien luettavuus ja mitä on typografia, auttavat löytämään syvällisempiä esimerkkejä ja vertaamaan työtäsi yleisiin käytäntöihin.
Fonttien luettavuuden parannukset nostavat usein lomakkeiden täyttöasteita.
Kirjoita ylös yksi ennen ja jälkeen -muutos, jonka testaat tällä viikolla toimivalla sivulla. Pienet mitatut muutokset ovat parempia kuin epämääräiset suunnitelmat.
Kun tiimilläsi on yhteinen sanasto typografiasta verkkosuunnittelussa, suunnittelijoiden ja toimistojen kanssa tarvitaan vähemmän korjauskierroksia.
Työkalut, jotka helpottavat visuaalisia päivityksiä
Moniin asettelun ja tyylin ongelmiin ei tarvita omaa koodia. Visuaalisella editorilla säädät välejä, värejä ja kirjasimia ja esikatselet samalla puhelin- ja tietokonenäkymää.
WEMASYn Sivustonrakentajassa on visuaalinen muokkaus, joten voit julkaista muutokset odottamatta kehittäjää jokaisen pikkusäädön takia. Avaa Sivustonrakentaja, kun olet valmis soveltamaan oppimaasi.
Kun julkaiset päivityksiä, tarkista vielä fonttityypit ja typografian säännöt, niin osio pysyy yhtenä kokonaisuutena mielessäsi.
Sinulla on nyt toimiva näkökulma typografiaan verkkosuunnittelussa. Käytä sitä, kun käyt läpi sivustoasi, hyväksyt markkinointiaineistoja tai ohjeistat suunnittelijaa. Jatka lukuihin typografian säännöt ja Google Fonts verkkosivustoille, niin vauhti säilyy tässä osiossa.
Typografian hallinta verkkosuunnittelussa on taito, joka kehittyy vähitellen. Palaa tähän lukuun, kun olet viimeistellyt yhden parannuksen, jotta ajatukset siirtyvät lukemisesta tavaksi. Pienet toistuvat tarkistukset toimivat paremmin kuin kaikkien sääntöjen ahtaminen kerralla. Kirjaa ylös, mikä toimi yleisöllesi, niin seuraava päivitys sujuu nopeammin.
Usein kysytyt kysymykset
Kauanko typografian parantaminen verkkosuunnittelussa kestää?
Useimmat pienyritykset saavat sivunsa selkeämmiksi muutamalla keskittyneellä kerralla, kun soveltavat tämän luvun perusasioita. Aloita etusivusta ja vie samat säännöt sitten palvelu- ja yhteystietosivuille.
Tarvitsetko suunnittelijan typografiaan verkkosuunnittelussa?
Suunnittelija auttaa laajoissa brändiuudistuksissa, mutta moni typografiaan liittyvä korjaus onnistuu itse, kun tiedät, mitä katsoa. Lue tämän luvun rinnalla fonttityypit, niin saat aiheesta lisää.
Voiko WEMASY auttaa typografian käytössä 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 muutokset puhelimella.
Mikä on yleisin virhe typografiassa verkkosuunnittelussa?
Ihmiset yrittävät korjata kaiken kerralla sen sijaan, että etenisivät sivu kerrallaan. Valitse yksi tärkein asia, esimerkiksi luettavuus tai kontrasti, ja katso sitten typografian säännöt seuraavaa parannusta varten.
Miten typografia verkkosuunnittelussa 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 typografian jälkeen verkkosuunnittelussa?
Jatka tämän kirjan luvuilla fonttityypit ja typografian säännöt, niin rakennat brändillesi kokonaisen visuaalisen järjestelmän verkkoon.