Kui kasutaja teie veebisaiti külastab, on tüpograafia esimene asi, mida ta märkab. See loob kasutajakogemuse isegi enne, kui nad on teie veebisaidi pakutavast sisust sõnagi lugenud.

Tüpograafial on potentsiaal minna loo jutustamisest kaugemale. See kujutab, kes on veebisaidi taga ja mida nad pakuvad. Mõelge veebisaidi tüpograafiale samamoodi nagu oma hääletoonist kõne ajal, seda kasutatakse atmosfääri loomiseks, mis kutsub esile publiku emotsionaalse reaktsiooni.

Erinevate fontide ja kirjutamisstiilide kasutamine oma veebisaidil on suurepärane viis selle visuaalse atraktiivsuse parandamiseks, samas kui kehv tüpograafia ei motiveeri külastajaid sinna jääma, sest pole midagi huvitavat, mida haarata ja nende tähelepanu juhtida. Õige tüpograafia abil saate muuta kasutajakogemuse pingutusteta, sujuvaks ja lõppkokkuvõttes nauditavamaks!

Sisuliselt on tüpograafia vaid reeglite kogum näiliselt lihtsate asjade jaoks – tähtede vahe, tähtede kõrgus, tõmmete kuju ja muud sellised pisidetailid. Kuid viis, kuidas see teiste elementidega suhtleb, käitub ja välja näeb, muudab ühe veebisaidi teisest erinevaks. See loob püsiva mulje ja takistab lugejal teistele veebisaitidele hüppamast.

Kui kirjutate uut sisu, peate kasutama fonditüüpi, mida on lihtne lugeda igas seadmes. Kui tüpograafia on liiga lihtne, võib isegi kõige põnevam sisu tunduda igav ja üksluine.

Olgem ausad. Elame ajastul, kus peaaegu kõik tipptasemel veebisaidid pakuvad dünaamilisi elemente ja optimeeritud navigeerimist. Seda silmas pidades, kas midagi nii ebaolulist nagu joonestiilis tüpograafia muudab teie vaatajaskonda tõesti.

Tõde on see, et võimekates kätes võib joontüpograafia anda teie kaubamärgi kohta julge avalduse ja olla isegi teie veebipõhise kohaloleku nurgakivi.

Siin on mõned näited, mis kinnitavad meie seisukohta.

Alphaputt

Heitke pilk Alphaputti veebisaidile. Sellel on trendika välimusega kangelaste ala, mis sisaldab omapäraseid animatsioone. Välimuse järgi tundub, et Alphaputti meeskond on oma UX-i tõesti läbi mõelnud. Animatsioon võtab enda alla vaid väikese osa ekraanist. Kõik muu on staatiline ja puhas. Tulemuseks on kontuuritüpograafia turvaline taust.

Toonami

Toonami Adult Swimi veebisait on veel üks suurepärane näide sellest, miks joonestiilis tüpograafia on suurepärane valik. Veebikujundusel on hämmastav kosmiline õhkkond. Seal on madalad kastid, ruudustik ja kontuuriga ringid. Seal on õõnsa kujuga tähed, mis on tehnilised ja rafineeritud. Need on kaunilt segunenud kogu veebikujundusega. Valikud on tõesti hästi läbi mõeldud, sest miski muu poleks nii täiuslikult läinud kui see tüpograafia.

1MD

1MD on suurepärane näide sellest, kuidas hea tüpograafia võib veebisaidi külastajate tähelepanu peaaegu kohe äratada. Veebisait kasutab tohutut valget tüpograafiat koos erinevate animatsioonide slaidiseansiga, mis hoiab publikut oma ekraanidel. Tulemuseks on veebisaidi külastajate kohene tähelepanu.

Yukie Nail New York

Yukie Nail New Yorgi veebikujundus kasutab ka suurepärast tüpograafiat. Veebilehe kangelasala on pilkupüüdev vedela stiili efektiga lõuend. Lainetus häirib kogu pinda iga hiireliigutusega sellel lõuendil. Kuigi veebisaidil kasutatav õõnes kirjatüüp sulandub veidi taustaga, sulandub see siiski suurepäraselt veebisaidi naiseliku atmosfääriga.

Marie Guillaumet

Veebisait kasutab käsitsi kirjutatud kirjatüüpi, mis ühtib nende pakutavate teenustega. See annab portfellile isikupärastamise tunde, mis paneb uskuma, et disainer on tootmisprotsessiga füüsiliselt seotud. Sellel veebisaidil on unikaalsust ja individuaalsust, mida illustreerivad suurepäraselt käsitsi joonistatud ikoonid, mis sobivad ideaalselt käsitsi kirjutatud kirjatüübiga, lisades veebisaidi üldilmele iseloomu.

Õnn

Veel üks hea näide retrostiiliga joontüpograafiast on Good Fortune’i veebisait. Tänu ühevärvilisele lõuendile on seal ohtralt tühikuid. Graatsilisest kirjatüübist piisab külastajate tähelepanu tõmbamiseks. Lõpptulemuseks on puhas ja stiilne välimus, mis tõesti läbib kaubamärgi USP-d.

Tüpograafia kasutamise parimad tavad veebikujunduses

1 Hoidke see lihtsalt

Kuigi veebitüpograafia kallal töötamine on oluline, ei taha te sellega üle pingutada. Loetavus on võti ja te ei tohiks kasutatavat fonti ja stiile nii keeruliseks muuta, et lugejatel ei ole võimalik kirjutada, mida kirjutatakse.

Lihtsus mitte ainult ei suurenda veebisaidi visuaalset atraktiivsust, vaid suurendab ka teie sisu loetavust. Minimaalse arvu fonte kasutamine ja nendega järjepidevus veebisaidil loob teie sisu professionaalsuse ja ülesehituse.

Liiga pingutades näeb sisu välja vaid märkamatu segadusena, mida kasutajad ei pea huvitavaks ega intrigeerivaks. Seetõttu on kõige parem hoida see nii lihtne kui võimalik, pidades samal ajal silmas oma veebisaidi loetavust ja ülesehitust. Valige sihtseadmetes hästi kuvatavad ja loetavad fondid. Töötage tüpograafia kallal, kuid ärge üle pingutage.

2 Vältige pikki lauseid

Kasutajad saavad teie sõnumist hõlpsasti aru, kui lisate rea kohta vähem märke.

Mida lühemad on laused, seda parem on nende loetavus. Ärge tehke oma tüpograafiat liiga kitsaks ega liiga laiaks. Proovige piirata tähemärkide vahemikku rea kohta umbes 50–60-ni. Kaaluge paigutuse laiuse parandamist, et saada optimaalne reapikkus, et parandada vaatajaskonnale avaldatavat mõju.

3 Siduge fondid õigete vastetega

Süsteemifondid on veebidisaini puhul turvaline panus, need ei muuda veebisaidi paigutust keeruliseks ning on üldiselt hõlpsamini loetavad ja arusaadavad.

Kui soovite aga parandada nende fontide mõju tekstitööriistas, on kõige parem valida ja sobitada need paarikaupa. See annab teile suurepärase kombinatsiooni, kuna mõned neist fontidest töötavad kõige paremini, kui need on seotud teiste fontidega. Valige ja sobitage need oskuslikult, et pälvida publiku maksimaalne tähelepanu.

4 Kasutage tühikuid õigesti

Tekstiridade vahel olevaid tühikuid tuleks kasutada nutikalt. Need tühikud mitte ainult ei paranda teksti loetavust, vaid suurendavad ka visuaalset atraktiivsust ja nähtavust. Samuti aitavad need vältida seda, et veebisait paistaks liiga segane. Kasutage oma veebisaidil kindlasti õiget reakõrgust, et parandada selle tüpograafiat ja seega ka selle mõju külastajatele.

5 Värvikontrast

Kuigi värvikontrastsus võib veebidisaini puhul tunduda elementaarne kontseptsioon, kipuvad paljud sellest siiski mööda vaatama. See põhimõte on eriti oluline, kui on aeg valida värvid oma üldise disaini ja tüpograafia jaoks.

Üks levinud viga, mida paljud veebidisainerid teevad, on musta teksti panemine täiesti valgele taustale. See loob nii palju kontrasti, et see ei meeldi kasutajale üldse. Kui heita kiire pilk erinevatele veebisaitidele, saate teada, et valgel taustal olev tekst pole päris must. Kontrastsuse vähendamiseks ja teksti hõlpsasti loetavaks muutmiseks kasutavad nad tegelikult halli värvi teksti.

Täiuslikku kontrasti ei saa saavutada lihtsalt kahe väga erineva värvi leidmisega. See, et need on erinevad värvid, ei tähenda, et need koos suurepäraselt toimiksid. Kui te pole kindel, kuidas õigeid värve valida, kaaluge selle teisendamist hallskaalasse. See võimaldab teil näha värvide väärtust, mis on olulisem kui kahe kontrastse värvi valimine.

6 Kerning

Iga tähemärgi vahelise tühiku reguleerimise protsessi nimetatakse kerninguks. Kerningu eesmärk on saavutada sümmeetriline ja tasakaalustatud välimus, kuna see aitab ühtlustada iga tähe vahel olevat tühiku välimust. Kuigi see ei ole lõigetes väga oluline, peate pöörama suurt tähelepanu suurele kirjatüübile ja päistele. Kerning on oluline tööriist reavahede vältimiseks teie kujunduses. Kuigi kerning on üldiselt tihedamalt seotud trükikujundusega, muutub see nüüd üha olulisemaks ka veebikujunduse jaoks.

7 Sans Serif vs. Serif

Käimas on arutelu selle üle, millised fondid on loetavamad, serif või sans serif. Mis tahes veebidisaini kallal töötades ollakse üldiselt nõus, et serif-fonte on ekraanil palju lihtsam lugeda kui serif-fonte. Kui töötate oma veebisaidi kirjatüübi kallal, kasutage suurema osa teksti jaoks sans serif-fonte. ja kasutage veebikoopia väikeste osade, päiste ja pealkirjade jaoks serif-fonte.

8 Teie sihtrühm

Teie tüpograafia peaks sõltuma ka teie vaatajaskonnast. On oluline, et teie veebisait sobiks hästi teie sihtrühmaga. Veebisaidi tüpograafilist kujundust luues veenduge, et mõistate lõppkasutajat ning pidage meeles tema ootusi ja vajadusi.

Mõelge sihtrühma vanuserühmale. Mis neile meeldib ja mis ei meeldi? Millised on nende eelistused?

Vastused neile küsimustele aitavad teil oma veebisaiti kujundada vastavalt sihtrühma ootustele. Samuti aitab see teil valida vaatajaskonna jaoks õiged tüpograafiaelemendid.

9 Hierarhia

Tüpograafiline hierarhia luuakse sageli kasutades

jne, sildid. See ei ole seotud ainult teksti suurusega, vaid määrab ka ühe tüpograafilise elemendi silmapaistvuse teise suhtes. Seda saab määrata kontrastsete värvide, suuruse, valge ruumi ja erinevate kirjatüüpide abil. Kui soovite saada oma veebisaidi jaoks ideaalset hierarhiat, alustage oma paigutuse visandist. Kõige olulisemad visuaalsed elemendid peaksid olema ülaosas ja kõige vähem olulised all. Teie tüpograafia kõige olulisemad elemendid ei pea olema suuremad. Need peaksid olema teiste elementidega võrreldes maksimaalselt esile tõstetud. Iga elemendi tähtsuse mõistmiseks küsige endalt, mida soovite, et teie publik kõigepealt loeks. See element ei pea tingimata olema teie veebipaigutuse ülaosas, kuid see peaks olema fookuspunkt.

10 suurtähtedega teksti

Suurtähtedega tekstide kasutamine tekitab lugejas tunde, nagu karjute neile oma sõnumit. Pidage meeles, et te ei soovi oma sisu lugejatele peale suruda. Kui neile tekib tunne, et surute neile peale turundusmaterjale, heidutab teie veebisait neid enne, kui saate oma sõnumi tuuma neile edastada.

Kui soovite kasutada ainult suurtähti, tehke seda ainult siis, kui see on tõesti vajalik, ja nagu eespool mainitud, pidage meeles publiku kavatsusi.

Kokkuvõtteks

Kui soovite oma veebidisaini eesmärke realiseerida, peate tagama, et veebisaidi tüpograafia on lihvitud ja loetav. See peaks olema silmale meeldiv, mitte segama. Ärge kartke olla loominguline. Vaadake kannatlikult läbi erinevad fondikogud ja leidke aega, et teha kindlaks, mis teile kõige paremini sobib. Kuigi pole olemas ühtset valemit, mis aitaks teil saavutada täiuslikku veebidisaini tüpograafiat, saate oma oskusi piisavalt harjutada.

: instantshift.com