Päivität etusivuasi myöhään tiistai-iltana. Otsikko on kunnossa, kuvat ovat kunnossa, mutta kävijät häipyvät silti sekunneissa. Alat pohtia, onko typografia se asia, jonka olet jättänyt huomaamatta. Usein on. Pienet visuaaliset valinnat muovaavat ensivaikutelmaa nopeammin kuin useimmat yrittäjät odottavat.
Typografia on kirjasinten asettelun taito ja tekniikka, jolla kieli on luettavaa ja miellyttävää katsoa. Tässä luvussa kerrotaan yksinkertaisesti, mitä se tarkoittaa, miksi se vaikuttaa verkkosivustoosi ja markkinointiisi ja miten sen voi ottaa käyttöön ilman alan sanahelinää. Näet myös, miten typografia verkkosuunnittelussa liittyy samaan kokonaisuuteen. Käydään se läpi askel kerrallaan.
Mitä on typografia
Typografia on kirjasinten asettelun taito ja tekniikka, jolla kieli on luettavaa ja miellyttävää katsoa.
Käytännössä typografia näkyy sivustosi otsikoissa, palvelusivuilla, some-grafiikoissa ja painotuotteissa. Kun osaat nimetä sen oikein, ohjeistat suunnittelijoita nopeammin ja arvioit luonnoksia varmemmin.
Läheiset aiheet, kuten typografia verkkosuunnittelussa, liittyvät suoraan tähän. Pidä ne mielessä, kun luet tämän osion muut luvut.
Kirjasinvalinnat ratkaisevat, kuinka ammattimaiselta ja luotettavalta brändisi tuntuu verkossa.
Miksi typografia 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ä.
Verkkosuunnittelun typografiassa tyylin ja latausnopeuden sekä näytöllä näkymisen pitää olla tasapainossa.
Valitse yksi fontti otsikoille ja yksi leipätekstille, ennen kuin uudistat sivuja.
Jos haluat nähdä, miten tämä liittyy lähiaiheisiin, lue seuraavaksi serif vai sans serif ja fonttien yhdistäminen.
Käytännön tarkistuslista, jonka voit ottaa käyttöön heti
Valitse yksi fontti otsikoille ja yksi leipätekstille, ennen kuin uudistat sivuja.
Kun katsot mitä tahansa sivua, kysy, näkyykö typografia jo ensimmäisellä vierityksellä puhelimessa. Jos ei, vaihda osioiden järjestystä, ennen kuin alat hioa yksityiskohtia.
Tallenna kuvakaappaukset ennen muutoksia ja niiden jälkeen, jotta näet, mikä muutos auttoi typografiassa sivustollasi.
Jaa tämä lista jokaiselle, joka päivittää sivustoasi, jotta typografia verkkosuunnittelussa pysyy samanlaisena uusillakin sivuilla.
Valitse tälle kuukaudelle yksi seurattava mittari, esimerkiksi sivulla vietetty aika tai lomakkeiden aloitukset. Näin muutokset liittyvät liiketoiminnan tuloksiin eivätkä pelkkään makuun.
Miten aihe liittyy laajempaan brändiisi
Visuaaliset valinnat harvoin elävät vain yhdellä sivulla. Verkkosuunnittelun typografiassa tyylin ja latausnopeuden sekä näytöllä näkymisen pitää olla tasapainossa.
Some-julkaisujesi, sähköpostiesi ja painotuotteidesi pitäisi noudattaa samaa hierarkiaa, samoja värejä ja samoja kirjasinsääntöjä kuin verkossa.
Kun brändin visuaalinen linja alkaa karata, asiakkaat tuntevat pienen epäsuhdan, vaikka eivät osaisi selittää sitä.
Lue verkkoturvalliset fontit, niin voit verrata muistiinpanojasi tämän osion toiseen lukuun.
Kirjasinvalinnat ratkaisevat, kuinka ammattimaiselta ja luotettavalta brändisi tuntuu verkossa.
Kysymykset, jotka usein unohtuvat
Lisähakusanat, kuten typografia verkkosuunnittelussa ja typografian säännöt, auttavat etsimään syvällisempiä esimerkkejä ja vertaamaan työtäsi yleisiin käytäntöihin.
Verkkosuunnittelun typografiassa tyylin ja latausnopeuden sekä näytöllä näkymisen pitää olla tasapainossa.
Kirjoita ylös yksi ennen ja jälkeen -muutos, jonka testaat tällä viikolla toimivalla sivulla. Pienet mitatut muutokset voittavat epämääräiset suunnitelmat.
Kun tiimillä on yhteinen sanasto typografiasta, korjauskierroksia suunnittelijoiden ja toimistojen kanssa tarvitaan vähemmän.
Työkalut, jotka helpottavat visuaalisia päivityksiä
Moniin asettelun ja tyylin ongelmiin et tarvitse omaa koodia. Visuaalisella editorilla voit säätää välejä, värejä ja kirjasimia ja katsoa 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 serif vai sans serif ja fonttien yhdistäminen, jotta osio pysyy yhtenä kokonaisuutena mielessäsi.
Sinulla on nyt toimiva näkökulma typografiaan. Käytä sitä, kun käyt läpi sivustoasi, hyväksyt markkinointiaineistoja tai ohjeistat suunnittelijaa. Jatka lukuihin fonttien yhdistäminen ja verkkoturvalliset fontit, niin vauhti säilyy tässä osiossa.
Usein kysytyt kysymykset
Kauanko typografian 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 typografiaan?
Suunnittelijasta on apua isoissa brändiuudistuksissa, mutta moni typografiaan liittyvä korjaus onnistuu itse, kun tiedät, mitä katsoa. Lue tämän luvun rinnalla serif vai sans serif, niin saat aiheesta lisää.
Voiko WEMASY auttaa typografian soveltamisessa 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 typografiassa?
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 fonttien yhdistäminen seuraavaa parannusta varten.
Miten typografia 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?
Jatka tämän kirjan luvuilla serif vai sans serif ja fonttien yhdistäminen, niin rakennat brändillesi kokonaisen visuaalisen järjestelmän verkkoon.