{"id":247834,"date":"2023-04-02T07:46:00","date_gmt":"2023-04-02T04:46:00","guid":{"rendered":"https:\/\/inform.click\/kuidas-kasutada-tupograafiat-ja-disaini-kasutajakogemuse-suurendamiseks\/"},"modified":"2023-04-02T07:47:00","modified_gmt":"2023-04-02T04:47:00","slug":"kuidas-kasutada-tupograafiat-ja-disaini-kasutajakogemuse-suurendamiseks","status":"publish","type":"post","link":"https:\/\/inform.click\/et\/kuidas-kasutada-tupograafiat-ja-disaini-kasutajakogemuse-suurendamiseks\/","title":{"rendered":"Kuidas kasutada t\u00fcpograafiat ja disaini kasutajakogemuse suurendamiseks"},"content":{"rendered":"<p>\n  Mis teeb veebisaidi v\u00f5i e-kirja silmapaistvaks ja lihtsaks? Enne kui hakkate lugema juhendeid sihtlehe loomise v\u00f5i t\u00e4iusliku meili leidmise kohta, v\u00f5iksite vahelduseks m\u00f5elda lihtsalt ja minimaalselt.\n<\/p>\n<p>\n  Niisiis, mis teeb midagi sellist imeliseks? Kas see on visuaal, v\u00e4rvid, koopia\u2026 v\u00f5i midagi muud?\n<\/p>\n<p>\n  Noh, k\u00f5ik need on h\u00e4sti ja h\u00e4sti, eriti koopia (pigistage silma! ), kuid on midagi, mis paneb kasutaja <strong>t\u00f5eliselt<\/strong> t\u00e4helepanu p\u00f6\u00f6rama: t\u00fcpograafia.\n<\/p>\n<p>\n  Minu hea s\u00f5bra Google'i s\u00f5nul on t\u00fcpograafia tr\u00fckiste stiil ja v\u00e4limus. See, et see on omaette kunstiliik, on \u00fctlematagi selge.\n<\/p>\n<p>\n  Ja t\u00fcpograafia on aluseks, mille alusel luuakse k\u00f5ikv\u00f5imalikud kujundused, mis on seotud kirjas\u00f5naga. See t\u00e4hendab, et leiate selle k\u00f5ikjalt: raamatutest, pakenditelt, isegi ja mis k\u00f5ige t\u00e4htsam, meie veebisaitidelt, meilidelt ja sihtlehtedelt.\n<\/p>\n<p>\n  Olgu see kunstiline v\u00f5i mitte, aga t\u00fcpograafia on midagi, mis peab pakkuma kasutajatele head kogemust, nagu k\u00f5ik t\u00f6\u00f6riistad. Ja kursiivt\u00e4hed v\u00f5ivad olla nii ilusad, aga kas need on kasutatavad?\n<\/p>\n<p>\n  Vaatame, kuidas saaksime \u00f5iget t\u00fcpograafiat kasutades parandada kasutajakogemust ja kasutajaliidest ennast.\n<\/p>\n<h5>\n  Alguses on Font<br \/>\n<\/h5>\n<p>\n  Kujutage ette, kui blaa ja \u00fcksk\u00f5ikne n\u00e4eks teie veebisait v\u00e4lja ja kui palju see kasutajakogemusest v\u00e4lja v\u00f5taks, kui teie font ei vastaks ettev\u00f5tte p\u00fchale kolmainsusele: teie sihtr\u00fchmale, teie br\u00e4ndi toonile ja eesm\u00e4rkidele.\n<\/p>\n<p>\n  \u00d5ige fondi valimine on natuke nagu ruumi jaoks sobivate kardinate valimine. Kleepuvad kardinad n\u00e4itavad kehva maitset ja kirjat\u00fc\u00fcp, mis lihtsalt ei sobi, v\u00f5ib muuta teie projekti parimal juhul kleepuvaks ja halvimal juhul r\u00e4mpspostiks.\n<\/p>\n<p>\n  Font on sama oluline kui visuaal ise, et luua muljet ja m\u00e4\u00e4rata t\u00e4pselt kindlaks asjad, mida vajate t\u00e4pselt nii veebisaidil kui ka meilis, optimeerides teie kasutuskogemust.\n<\/p>\n<p>\n  Elegantsete ja mitte liiga t\u00e4htsate asjade jaoks on vaja paksus kirjas, kursiivseid t\u00e4hti ja intensiivset kalligraafiat. Sellised kombinatsioonid nagu allpool on kohustuslikud:\n<\/p>\n<p>\n  <br \/>\n  br\u00e4ndi fontide paarid\n<\/p>\n<p>\n  Siiski olen sunnitud teid millegi eest hoiatama: liiga palju fonte paneb teid m\u00e4ngu kaotama. Teil v\u00f5ib olla maksimaalselt kahte t\u00fc\u00fcpi fonte ja peate veenduma, et neid kasutatakse \u00fclaltoodud n\u00e4ites: p\u00e4is on julgem ja rangem, koopia keha jaoks on see t\u00e4psem.\n<\/p>\n<p>\n  Ja pidage meeles j\u00e4rgmist. Kui me r\u00e4\u00e4gime teie veebisaidist, mitte sihtlehest v\u00f5i meilist, peaksite v\u00f5ib-olla m\u00f5tlema standardse fondi kasutamisele.\n<\/p>\n<p>\n  N\u00e4ete, kursiivkirja v\u00f5ib m\u00f5nikord olla raske lugeda ja liiga kunstiline tulemus v\u00f5ib olla ilus, kuid seda pole lihtne lugeda ja m\u00f5ista. T\u00e4nap\u00e4eva h\u00f5ivatud klientidele, kes oskavad tekstiplokke skannida ja t\u00e4pselt seda, mida nad peavad teadma, leiavad, v\u00f5ib aja s\u00e4\u00e4stmiseks midagi mittestandardset tunduda liiga palju vaeva n\u00e4gevana.\n<\/p>\n<p>\n  Teie publik on n\u00e4iteks Times New Romaniga rohkem tuttav. Nad v\u00f5ivad teile isegi \u00f6elda, kus seda tuleks kasutada, ja neid on lihtne l\u00e4bi vaadata.\n<\/p>\n<p>\n  Veelgi enam, see v\u00f5ib p\u00f5hjustada t\u00f5elise sisuprobleemi selles m\u00f5ttes, et kunstilisem font ja vorming v\u00f5ib t\u00e4helepanu sisu kaasamiselt eemale viia.\n<\/p>\n<p>\n  Fondi erielemendid:\n<\/p>\n<p>\n  Font koosneb erinevatest elementidest, mis v\u00f5ivad selle kasutamist \u00fcsna palju muuta v\u00f5i rikkuda. Teil on erinevad stiilid, kaalud, teosed! Nii et l\u00e4hme vaatame, millega see k\u00f5ik on:\n<\/p>\n<p>\n  Esiteks on teil oma <strong>fondiperekond .<\/strong> Fontide perekond (v\u00f5i kirjat\u00fc\u00fcp) on \u00fcsna suur kategooria, mis sisaldab sama stiili fonte.\n<\/p>\n<p>\n  Teiseks on teil <strong>fondi kaal<\/strong>, st iga m\u00e4rgi laius. See element eraldab, millist fonti pealkirja loomiseks kasutatakse ja milline neist j\u00f5uab kehakoopiasse.\n<\/p>\n<p>\n  Kolmandaks l\u00e4heb <strong>kerning<\/strong>, st muster, mida m\u00e4rgid j\u00e4rgivad, st kahe t\u00e4he vahe, mis on vajalik, kuna teie silmad j\u00e4rgivad t\u00e4pselt seda mustrit.\n<\/p>\n<p>\n  See vahe ja veerised m\u00e4\u00e4ravad l\u00f5pliku, v\u00e4ga olulise elemendi:\n<\/p>\n<p>\n  T\u00e4hem\u00e4rkide arv <strong>rea kohta<\/strong>. Liiga palju t\u00e4hem\u00e4rke rea kohta ja teksti sisu tundub segane, mille tulemuseks on \u00fcsna halb kasutuskogemus.\n<\/p>\n<p>\n  Liiga v\u00e4he ja silm v\u00f5tab rohkem aega, et j\u00f5uda j\u00e4rgmise l\u00f5iguni, saades t\u00e4pselt sama tulemuse, mida eespool mainisin.\n<\/p>\n<p>\n  Pikkuse piiramisega parandate oma teksti loetavust. Kui rida on liiga pikk, ei kuvata seda seadmes korralikult, mis t\u00e4hendab, et lugeja ei saa seda korralikult lugeda, mis p\u00f5hjustab CRO (Conversion Rate Optimization) jama.\n<\/p>\n<p>\n  Peate leidma selle jaoks sobiva kuldse l\u00f5ike ja pidage meeles, et see kuldne suhe peab piirduma 60 t\u00e4hem\u00e4rgiga rea \u200b\u200bkohta.\n<\/p>\n<p>\n  Ja v\u00e4ike vihje siin: peate arvestama ka <strong>ridade vahega<\/strong>, kuna rida on lihtsalt liiga lihtne uuesti lugeda v\u00f5i see t\u00e4ielikult v\u00e4lja j\u00e4tta. Mis pole kunagi hea tava, eriti praegusel ajal, mil tarbijatel on nii palju valikuv\u00f5imalusi.\n<\/p>\n<h5>\n  Kirja suurus ja muud \u00f5udusunen\u00e4od<br \/>\n<\/h5>\n<p>\n  Kui palju kordi olete n\u00e4inud suurte suurt\u00e4htedega teksti ja m\u00f5elnud, et kirjanik tahab vihaselt karjuda? Vean kihla, et vastus on &#8220;palju kordi&#8221;.\n<\/p>\n<p>\n  Kirjasuurused v\u00f5ivad toimida samamoodi nagu r\u00e4\u00e4gitava s\u00f5na toon: kaldkiri v\u00f5ib olla matkiv, paksus kirjas kiri v\u00f5ib olla n\u00f5udlik, suurt\u00e4hed v\u00f5ivad t\u00e4helepanu \u00e4ratada ja nii edasi.\n<\/p>\n<p>\n  Seet\u00f5ttu peab disainer olema fondi ja stiili valimisel ettevaatlik, eriti kui tal on mitmekesine publik, kellega &#8220;vestelda&#8221;.\n<\/p>\n<p>\n  Kui te mind ei usu, avage romaan ja kontrollige fonti. Seej\u00e4rel avage lasteraamat ja tehke sama.\n<\/p>\n<p>\n  See k\u00f5ik taandub sellele, mida ma alguses mainisin: peate oma sihtr\u00fchmale k\u00f6itma nii oma t\u00fcpograafia kui ka koopia ja visuaalide enda kaudu.\n<\/p>\n<p>\n  Kuid suurus pole k\u00f5ik, mis loeb. Kuna me r\u00e4\u00e4gime digitaalsest, peab teie t\u00fcpograafia olema k\u00f5igis seadmetes laitmatu. Peate optimeerima mobiilseadmete, tahvelarvutite ja lauaarvutite jaoks, et kasutaja ei l\u00e4heks segadusse ega j\u00e4taks teie sisu t\u00e4ielikult k\u00f5rvale.\n<\/p>\n<p>\n  Pidage meeles, et k\u00f5rgus on sama oluline. V\u00e4ga pikk v\u00f5i v\u00e4ga l\u00fchike tekst, mis n\u00e4eb hea v\u00e4lja t\u00f6\u00f6lauavaate testimisel, ei pruugi mobiilis h\u00e4sti toimida.\n<\/p>\n<p>\n  V\u00f5ib-olla on k\u00f5ige <strong>suurem \u00f5udusunen\u00e4gu<\/strong> teksti joondamine. L\u00e4\u00e4ne kultuuris on inimesed harjunud lugema vasakult paremale, seet\u00f5ttu tuleks seda fakti meeles pidada ja vastavalt k\u00e4ituda.\n<\/p>\n<p>\n  Kasutage vasakjoondust, et j\u00e4ljendada seda, kuidas inimesed tr\u00fckitekste loevad, ja oletegi valmis.\n<\/p>\n<p>\n  Sama ei t\u00f6\u00f6ta teie sihtr\u00fchma puhul, kui see asub kuskil idas, kus lugemine toimub paremalt vasakule. Nii et j\u00e4llegi on teie sihtr\u00fchm esimene asi, mida enne otsuse tegemist kaaluda.\n<\/p>\n<h5>\n  Trendid on teie s\u00f5brad<br \/>\n<\/h5>\n<p>\n  Teate ju k\u00fcll, et parimad tavad ei pea t\u00fcpograafia ja kujunduse puhul kooki, eks?\n<\/p>\n<p>\n  V\u00f5ite kasutada parimaid fonte, teie joondus v\u00f5ib olla laitmatu, kuid ilma kujundustrende kasutamata v\u00f5ib teie e-post, veebisait, sihtleht, olenemata sellest, mida loote, j\u00e4\u00e4da \u00fcheks teie k\u00f5ige paremini hoitud saladuseks.\n<\/p>\n<p>\n  Paks on m\u00f5nikord ilus\n<\/p>\n<p>\n  M\u00f5elge n\u00e4iteks MAC-ile. Ilubr\u00e4nd armastab kasutada elemendina paksu teksti ja \u00e4\u00e4rmist kontrasti:\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-311789-63837ef07ac28.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-311789-63837ef07ac28.webp\" alt=\"\" \/><\/a> MAC kosmeetika<\/p>\n<p>\n  See on kaubam\u00e4rgi tunnuslause ja see on olnud igavesti. See on dramaatiline ja te ei saa sellest m\u00f6\u00f6da vaadata. Sama kehtib ka nende uudiskirja kangelase pildi kohta:\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-311789-63837ef308a87.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-311789-63837ef308a87.webp\" alt=\"\" \/><\/a> MAC Cosmetics uudiskiri<\/p>\n<p>\n  Tervitus on lihtsalt\u2026 Seal! Kui me peaksime looma sellest kangelasepildist inimese, oleks see v\u00e4ga stiilne inimene, kellel oleks v\u00e4ga hea meel n\u00e4ha teid t\u00e4naval k\u00f5ndimas.\n<\/p>\n<p>\n  Kaaluge ka j\u00e4rgmist. Lisaks rasvaste t\u00e4htede kasutamisele saate kujunduses esile t\u00f5sta ka teksti.\n<\/p>\n<p>\n  Umbes nagu see, mida me lapsep\u00f5lves oma raamatutel markeritega tegime. M\u00e4letate, kui palju t\u00e4helepanu see varem \u00e4ratas?\n<\/p>\n<p>\n  Need on kaks v\u00f5imalust, mida saate kasutada disaini hierarhia loomiseks.\n<\/p>\n<p>\n  V\u00fcrtsitage teksti!\n<\/p>\n<p>\n  Tekstiplokid on suurep\u00e4rased, kui joondate need ja inimesed saavad neid isegi proovimata lugeda, kuid mis juhtub siis, kui teil on vaja massist eristuda ja asju veidi v\u00fcrtsitada?\n<\/p>\n<p>\n  Proovige pealkirjade osas asju segamini ajada tekstiga, mis algab horisontaalselt, muutub vertikaalseks, hajutatud t\u00e4htedeks&#8230;\n<\/p>\n<p>\n  Siin on v\u00f5tmeks k\u00fclastaja kaasamine. Ja mis oleks parem viis nende kaasamiseks, kui olla m\u00e4nguline ja lasta neil j\u00e4lgida neid v\u00e4ikseid elemente, mis panevad nad natuke ringi m\u00e4ngima.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-311789-63837ef5b2204.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-311789-63837ef5b2204.webp\" alt=\"\" \/><\/a> Maagilised inimesed Voodoo inimesed<\/p>\n<p>\n  \u00dclaltoodud pilt kujutab endast t\u00e4iuslikku visualiseeringut sellest, mida ma \u00fcritan teha, kuna pidin \u00fcks v\u00f5i kaks korda pead p\u00f6\u00f6rama, ilma et eksiks. N\u00e4ete, et vasakule joondamise p\u00f5him\u00f5te on siin endiselt ilmne, kuna te ei saa nime valesti lugeda, v\u00e4lja arvatud juhul, kui see on tahtlik ja vajate loovuse harjutust!\n<\/p>\n<h5>\n  Sisut\u00fckid<br \/>\n<\/h5>\n<p>\n  Mida iganes teete, peaksite alati meeles pidama, et sisu on see, millega t\u00f6\u00f6tate, ja sisu on kuningas. Alati.\n<\/p>\n<p>\n  Veenduge, et kvaliteet vastaks teie n\u00e4gemusele ja e-kirjade postitamise, \u00fcleslaadimise v\u00f5i saatmise sagedusele.\n<\/p>\n<p>\n  Teiseks veenduge, et teie kujundus ei v\u00f5taks t\u00e4helepanu sisult \u00e4ra. N\u00e4iteks CTA-nupp peaks olema paksu ja kontrastset v\u00e4rvi, kuid mitte niiv\u00f5rd, et adressaat ei loeks s\u00f5numit, mida proovite edastada.\n<\/p>\n<p>\n  Lugege sisu, veetke sellega aega ja s\u00fcvenege sellesse t\u00f5eliselt. Kui postitate palju uusi asju, peavad need olema \u00f5igeaegsed, asjakohased ja t\u00e4helepanu k\u00f6itvad.\n<\/p>\n<p>\n  Visualiseerige, mida soovite \u00f6elda. Lugege oma tekst valjult ette ja veenduge, et loote pildi, mis teil oli, kui mustanditele esimest korda silma j\u00e4ite.\n<\/p>\n<h5>\n  Ja veel \u00fcks tee jaoks<br \/>\n<\/h5>\n<p>\n  Olge v\u00e4ga t\u00e4helepanelik v\u00e4rvide suhtes, mida kavatsete kasutada. Peale v\u00e4rvips\u00fchholoogia ja selle, kuidas see kasutajat m\u00f5jutada v\u00f5ib, peate olema ettevaatlik veel paari asja suhtes.\n<\/p>\n<p>\n  <strong>Number \u00fcks<\/strong>, v\u00e4rvipimedus. \u00c4rge kasutage olulise teabe esilet\u00f5stmisel liiga palju punaseid v\u00f5i rohelisi toone.\n<\/p>\n<p>\n  V\u00e4rvipimedus on \u00fcsna tavaline seisund, kusjuures kaks k\u00f5ige levinumat juhtumit on punane ja roheline v\u00e4rvipimedus. Seega, kui r\u00e4\u00e4kida CTA-dest ja asjadest, mida peaksite teadma, nagu n\u00e4iteks n\u00f5uded ja tingimused, pidage kinni mustade ja kontrastsete tingimustega.\n<\/p>\n<p>\n  <strong>Number kaks<\/strong>, vilkuvad pildid ja tekst. Vilkuvad pildid v\u00f5ivad tekitada \u00e4revust, v\u00f5ivad kasutaja t\u00e4helepanu hajutada ja on omamoodi t\u00fc\u00fctud. Kuid need ei ole peamised p\u00f5hjused, miks peaksite neid v\u00e4ltima.\n<\/p>\n<p>\n  Vilkuvad kujutised v\u00f5ivad p\u00f5hjustada epilepsiahooge.\n<\/p>\n<h5>\n  Kokkuv\u00f5tteks<br \/>\n<\/h5>\n<p>\n  T\u00fcpograafia, veebidisaini ja kasutaja enda kogemuste osas on veel palju \u00fctlemata, kuid arvan, et oleme siin p\u00f5hit\u00f5ed k\u00e4sitlenud.\n<\/p>\n<p>\n  Lihtsalt veenduge, et m\u00f5elge kastist v\u00e4lja ja olge asjakohane, olemata samasugune nagu k\u00f5ik. Loominguline inimene nagu sina, leiab kindlasti viisi, kuidas m\u00f5elda v\u00e4ljaspool kasti!\n<\/p>\n<p>\n  Ja \u00e4rge unustage j\u00e4tta selle postituse kohta oma tagasisidega kommentaar!\n<\/p>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  : <a target=\"_blank\" rel=\"noopener nofollow\" data-pssr=\"\" href=\"http:\/\/www.instantshift.com\/2019\/12\/27\/typography-design-for-ux\/\">instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Mis teeb veebisaidi v\u00f5i e-kirja silmapaistvaks ja lihtsaks? Enne kui hakkate lugema juhendeid sihtlehe loomise v\u00f5i t\u00e4iusliku meili leidmise kohta, v\u00f5iksite vahelduseks m\u00f5elda lihtsalt ja minimaalselt. Niisiis, mis teeb midagi sellist imeliseks? Kas see on visuaal, v\u00e4rvid, koopia\u2026 v\u00f5i midagi muud? Noh, k\u00f5ik need on h\u00e4sti ja h\u00e4sti, eriti koopia (*pilgutab silma!*), kuid on midagi, mis paneb kasutaja t\u00f5eliselt t\u00e4helepanu p\u00f6\u00f6rama: t\u00fcpograafia. T\u00fcpograafia on stiil ja v\u00e4limus\u2026<\/p>\n","protected":false},"author":1,"featured_media":204064,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[247,221,195,52],"tags":[],"class_list":["post-247834","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-fondid","category-opikud","category-veebikujundus","category-web-ja-wordpress"],"_links":{"self":[{"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/posts\/247834","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/comments?post=247834"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/posts\/247834\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/media\/204064"}],"wp:attachment":[{"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/media?parent=247834"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/categories?post=247834"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/tags?post=247834"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}