Kun käyttäjä vierailee verkkosivustollasi, typografia on ensimmäinen asia, jonka hän huomaa. Se luo käyttäjäkokemuksen jo ennen kuin he ovat lukeneet yhden sanan verkkosivustosi tarjoamasta sisällöstä.

Typografialla on potentiaalia mennä pidemmälle kuin vain tarinan kertominen. Se kuvaa, kuka on verkkosivuston takana ja mitä he tarjoavat. Ajattele verkkosivuston typografiaa samalla tavalla kuin puhuisit äänensävyäsi puheen aikana, sillä sitä käytetään luomaan ilmapiiri, joka herättää yleisön emotionaalisen vastauksen.

Erilaisten kirjasimien ja kirjoitustyylien käyttäminen verkkosivustollasi on loistava tapa parantaa sen visuaalista vetovoimaa, kun taas huono typografia ei kannusta vierailijoita jäämään, koska siellä ei ole mitään mielenkiintoista kerätä ja kiinnittää heidän huomionsa. Oikean typografian avulla voit tehdä käyttökokemuksesta vaivatonta, saumatonta ja lopulta nautinnollisempaa!

Pohjimmiltaan typografia on vain sääntöjoukko näennäisesti yksinkertaisia asioita varten – kirjainten välit, kannen korkeus, viivojen muodot ja muut pienet yksityiskohdat. Mutta tapa, jolla se on vuorovaikutuksessa, käyttäytyy ja näyttää muiden elementtien kanssa, tekee verkkosivustosta erilaisen. Se luo pysyvän vaikutelman ja estää lukijaa siirtymästä muille verkkosivustoille.

Kun kirjoitat uutta sisältöä, sinun on käytettävä fonttityyppiä, jota on helppo lukea millä tahansa laitteella. Jos typografia on liian yksinkertainen, jännittävinkin sisältö voi lopulta näyttää tylsältä ja yksitoikkoiselta.

Ollaan rehellisiä. Elämme aikakautta, jolloin lähes jokainen huipputason verkkosivusto tarjoaa dynaamisia elementtejä ja optimoidun navigoinnin. Tämä mielessä pitäen, voiko jokin niin merkityksetön kuin viivatyylinen typografia todella muuttaa yleisöäsi.

Totuus on, että osaavissa käsissä linjatypografia voi antaa rohkean lausunnon brändistäsi ja jopa toimia verkkonäkyvyytesi kulmakivenä.

Tässä on joitain esimerkkejä väitteemme vahvistamiseksi.

Alphaputt

Katso Alphaputtin verkkosivut. Siinä on trendikkään näköinen sankarialue, joka sisältää omituisia animaatioita. Ulkonäön perusteella näyttää siltä, että Alphaputtin tiimi on todella miettinyt käyttökokemuksensa loppuun. Animaatio vie vain pienen osan näytöstä. Kaikki muu on staattista ja puhdasta. Tuloksena on turvallinen tausta ääriviivatypografialle.

Toonami

Toonami Adult Swim -sivusto on toinen loistava esimerkki siitä, miksi viivatyylinen typografia on loistava valinta. Verkkosuunnittelussa on hämmästyttävä kosminen tunnelma. Siellä on matalia laatikoita, ruudukkoa ja ääriviivattuja ympyröitä. Siellä on onttoja kirjaimia, jotka ovat teknisiä ja hienostuneita. Ne sulautuvat kauniisti koko web-suunnitteluun. Valinnat ovat todella hyvin harkittuja, sillä mikään muu ei olisi mennyt niin täydellisesti kuin tämä typografia.

1MD

1MD on loistava esimerkki siitä, kuinka hyvä typografia voi saada aikaan verkkosivuston vierailijoiden huomion lähes välittömästi. Sivusto käyttää valtavaa valkoista typografiaa ja diaesitystä erilaisista animaatioista, jotka pitävät yleisön kiinni näytöllään. Tuloksena on sivuston vierailijoiden välitön huomio.

Yukie Nail New York

Yukie Nail New Yorkin web-suunnittelussa käytetään myös erinomaista typografiaa. Sivuston sankarialue on silmiinpistävä kangas, jossa on nestemäinen vaikutus. Aaltoilu häiritsee koko pintaa jokaisella hiiren liikkeellä tämän kankaan päällä. Vaikka sivustolla käytetty ontto kirjasintyyppi sulautuu hieman taustaan, se sulautuu silti täydellisesti sivuston naiselliseen tunnelmaan.

Marie Guillaumet

Sivusto käyttää käsinkirjoitettua kirjasintyyppiä, joka on linjassa niiden tarjoamien palvelujen kanssa. Se antaa portfoliolle personoinnin tunteen, joka saa uskomaan, että suunnittelija on fyysisesti mukana tuotantoprosessissa. Tällä verkkosivustolla on ainutlaatuisuutta ja yksilöllisyyttä, mikä näkyy täydellisesti käsin piirretyissä kuvakkeissa, jotka sopivat täydellisesti käsin kirjoitettuun kirjasintyyppiin ja lisäävät luonnetta verkkosivuston yleisilmeeseen.

Onni

Toinen hyvä esimerkki viivatypografiasta, jossa on ripaus retrotyyliä, on Good Fortune -verkkosivusto. Yksivärisen kankaan ansiosta siellä on runsaasti tyhjää tilaa. Siro kirjasintyyppi riittää kiinnittämään vierailijoiden huomion. Lopputuloksena on puhdas ja tyylikäs ulkoasu, joka todella osuu brändin USP-vaatimuksiin.

Typografian käytön parhaat käytännöt verkkosuunnittelussa

1 Pidä se yksinkertaisena

Vaikka verkkotypografian parissa työskenteleminen on tärkeää, et halua liioitella sitä. Luettavuus on avain, ja sinun ei pitäisi monimutkaista käyttämääsi fonttia ja tyylejä niin pitkälle, että lukijoiden on mahdotonta selvittää, mitä on kirjoitettu.

Yksinkertaisuus ei ainoastaan lisää sivuston visuaalista vetovoimaa, vaan se lisää myös sisältösi luettavuutta. Vähimmäismäärän kirjasimia käyttäminen ja niiden noudattaminen verkkosivustolla luo myös ammattimaisuuden ja rakenteen tunteen sisällössäsi.

Liika yrittäminen saa sisällön näyttämään huomaamattomalta sotkulta, jota käyttäjät eivät pidä kiinnostavana tai kiehtovana. Siksi on parasta pitää se mahdollisimman yksinkertaisena pitäen samalla mielessä verkkosivustosi luettavuus ja rakenne. Valitse fontit, jotka näkyvät hyvin ja jotka ovat luettavissa kohdelaitteissa. Työskentele typografian parissa, mutta älä liioittele sitä.

2 Vältä pitkiä lauseita

Käyttäjät ymmärtävät viestisi helposti, jos lisäät vähemmän merkkejä riviä kohden.

Mitä lyhyempi lauseiden pituus, sitä parempi on luettavuus. Älä tee typografiasi liian kapeaa tai leveää. Yritä rajoittaa merkkien määrä riviä kohden noin 50-60:een. Harkitse asettelun leveyden korjaamista saadaksesi optimaalisen rivin pituuden ja parantaaksesi vaikutusta yleisöön.

3 Yhdistä fontit oikeisiin osumiin

Järjestelmäfontit ovat varma veto verkkosuunnittelussa, ne eivät vaikeuta verkkosivuston asettelua ja ovat yleensä helpompia lukea ja ymmärtää.

Jos kuitenkin haluat parantaa näiden fonttien vaikutusta tekstityökalussa, on parasta valita ja sovittaa ne pareittain. Tämä antaa sinulle loistavan sekoituksen, koska jotkut näistä kirjasimista toimivat parhaiten, kun ne yhdistetään muihin kirjasimiin. Valitse ja yhdistä ne taitavasti saadaksesi yleisösi suurimman huomion.

4 Käytä välilyöntejä oikein

Tekstirivien välissä olevien välilyöntien käyttö tulee tehdä fiksusti. Nämä tyhjät kohdat eivät ainoastaan paranna tekstin luettavuutta, vaan myös lisäävät visuaalista vetovoimaa ja näkyvyyttä. Ne auttavat myös estämään verkkosivuston näyttämisen liian sekavalta. Varmista, että käytät oikeaa rivinkorkeutta verkkosivustollesi, jotta voit parantaa sen typografiaa ja siten sen vaikutusta vierailijoihin.

5 Värikontrasti

Vaikka värikontrasti saattaa tuntua alkeelliselta käsitteeltä web-suunnittelun suhteen, monet jättävät sen silti huomiotta. Tämä periaate on erityisen tärkeä, kun on aika valita värit yleistä suunnittelua ja typografiaa varten.

Yksi yleinen virhe, jonka monet verkkosuunnittelijat tekevät, on mustan tekstin sijoittaminen täysin valkoiselle taustalle. Tämä luo niin paljon kontrastia, että se ei houkuttele käyttäjää ollenkaan. Jos katsot nopeasti erilaisia verkkosivustoja, huomaat, että teksti valkoisilla taustoilla ei ole todella mustaa. Itse asiassa he käyttävät harmaata tekstiä kontrastin pienentämiseksi ja tekstin helpottamiseksi.

Et voi saavuttaa täydellistä kontrastia vain etsimällä kahta hyvin erilaista väriä. Se, että nämä ovat eri värejä, ei tarkoita, että ne toimivat hyvin yhdessä. Jos et ole varma, kuinka valita oikeat värit, harkitse sen muuntamista harmaasävyiksi. Näin näet värien arvon, mikä on tärkeämpää kuin minkä tahansa kahden vastakkaisen värin valitseminen.

6 Kerning

Kunkin merkin välisen tilan säätämistä kutsutaan välilyönniksi. Kerningin tavoitteena on saada aikaan symmetrinen ja tasapainoinen ilme, koska se auttaa tasoittamaan jokaisen kirjaimen välissä olevan välilyönnin. Vaikka se ei ole kovin tärkeää kappaleissa, sinun on kiinnitettävä erityistä huomiota suuriin kirjaimiin ja otsikoihin. Kerning on tärkeä työkalu rivinvaihdon välttämiseksi suunnittelussasi. Vaikka kerning liittyy yleensä läheisemmin painomalleihin, se on nyt yhä tärkeämpää myös web-suunnittelussa.

7 Sans Serif vs. Serif

Parhaillaan käydään keskustelua siitä, mitkä kirjasimet ovat luettavampia, serif vai sans serif. Kun työskentelet kaikenlaisen web-suunnittelun parissa, on yleisesti sovittu, että sans serif -kirjasimia on paljon helpompi lukea näytöltä kuin serif-fontteja. Kun käsittelet verkkosivustosi kirjasintyyppiä, käytä sans serif-fontteja suurimmassa osassa tekstiä ja käytä serif-fontteja verkkokopion pienissä osissa, otsikoissa ja otsikoissa.

8 Kohdeyleisösi

Typografian tulisi myös riippua yleisöstäsi. On tärkeää, että verkkosivustosi sopii hyvin kohdeyleisöllesi. Varmista, että ymmärrät loppukäyttäjää ja pidät hänen odotukset ja tarpeet mielessä, kun luot verkkosivustosi typografista suunnittelua.

Mieti kohdeyleisön ikäryhmää. Mistä he pitävät ja mistä eivät pidä? Mitkä ovat heidän mieltymyksensä?

Vastaukset näihin kysymyksiin auttavat sinua suunnittelemaan verkkosivustosi kohdeyleisösi odotusten mukaisesti. Se auttaa myös sinua valitsemaan oikeat typografiset elementit yleisöllesi.

9 Hierarkia

Typografinen hierarkia muodostetaan usein käyttämällä

jne., tunnisteet. Se ei liity pelkästään tekstin kokoon, vaan se määrittää myös yhden typografisen elementin näkyvyyden suhteessa toiseen. Se voidaan määrittää käyttämällä kontrastivärejä, kokoa, valkoista tilaa ja erilaisia kirjasintyyppejä. Jos haluat saada täydellisen hierarkian verkkosivustollesi, aloita asettelusi luonnoksesta. Tärkeimmät visuaaliset elementit tulee olla ylhäällä ja vähiten tärkeimmät alareunassa. Tärkeimpien typografisi elementtien ei tarvitse olla suurempia. Niiden tulee olla mahdollisimman näkyvästi esillä muihin elementteihin verrattuna. Ymmärtääksesi kunkin elementin tärkeyden kysy itseltäsi, mitä haluat yleisösi lukevan ensin. Tämän elementin ei välttämättä tarvitse olla verkkoasettelusi yläosassa, mutta sen tulisi olla keskipiste.

10 isoilla kirjaimilla olevaa tekstiä

Isokokoisten tekstien käyttäminen saa lukijan tuntemaan, että huudat heille viestiäsi. Muista, että et halua pakottaa sisältöäsi lukijoille. Jos he saavat tunteen, että työnnät heille markkinointimateriaaleja, verkkosivustosi tyrmistyttää heidät, ennen kuin pystyt välittämään heille viestisi ytimen.

Jos haluat käyttää isoja kirjaimia, varmista, että teet sen vain silloin, kun se on todella tarpeen, ja pidä yleisön tarkoitus mielessäsi, kuten edellä mainittiin.

Yhteenveto

Jos haluat toteuttaa web-suunnittelusi tavoitteet, sinun on varmistettava, että sivuston typografia on kiillotettu ja luettava. Sen pitäisi miellyttää silmää, ei häiritä. Älä pelkää olla luova. Käy kärsivällisesti läpi eri fonttikokoelmat ja käytä aikaa selvittääksesi, mikä sopii sinulle parhaiten. Vaikka ei ole olemassa yhtä kaavaa, joka auttaisi sinua saavuttamaan täydellisen web-suunnittelutypografian, voit kasvattaa taitojasi riittävällä harjoittelulla.

: instantshift.com