10 veebitüpograafia reeglit, mida iga disainer peaks teadma

Saate lisada oma veebikujundusse palju elemente, mis loovad kaasamise ja hoiavad külastajate tähelepanu. Nende hulka kuuluvad pildid, videod ja isegi heli. Peaaegu iga veebisaidi kõige olulisem osa on aga sisu, mida külastajad loetud teabe saamiseks loevad.

Kui soovite muuta selle teabe hõlpsamini loetavaks, visuaalselt huvitavaks ja selle teksti lisamiseks veebisaidi üldisele kujundusele, peate mõistma tüpograafiat. See on kunst ja oskus muuta kirjasõna nii funktsionaalseks kui ka esteetiliselt nauditavaks.

Kui soovite õppida tüpograafiat enda huvides kasutama, vaadake neid 10 reeglit, mida iga disainer peaks meeles pidama.

1 Lõpetage LoremIpsumi kasutamine pärast esialgset projekteerimisprotsessi

Kui sisu on kuningas, siis miks ei võeta seda veebidisaini protsessis tõsiselt arvesse? Kasutades võltssisu kohatäitena, taandavad veebidisainerid sisu teisejärguliseks rolliks. See on suur märk sellest, et disaini prioriteedid on paigast ära. Algstaadiumis pole see nii problemaatiline, näiteks kui mõnitate erinevaid lehepaigutusi. Kui olete aga asjad kitsamaks muutnud, on oluline lõpliku kujunduse loomisel töötada tegeliku veebisisuga. See tagab, et konkreetsel veebilehel öeldule omistatakse sama suur tähtsus kui paigutusele ja visuaalsetele elementidele.

Lisaks sellele on tegelik tekst oluline kujunduse ja paigutuse osas. Te ei soovi olla olukorras, kus olete veebilehe täielikult kujundanud, vaid selleks, et teada saada, et see ei tööta tegeliku sisuga. Seetõttu on äärmiselt oluline saada sisukirjutaja kliendilt tegelik tekst võimalikult kiiresti.

2 Tehke tekst ilma serifita

Serifi tekst on täiesti ilus. Need on suurepärased fondid printimiseks ja suuremate printimisrakenduste jaoks, nagu pealkirjad, pealkirjad ja alampealkirjad. Kahjuks ei skaleerita serifid ekraanil hästi, kui tegemist on väiksemate sisukuvadega (nt tekstiplokid). Serifid, mis näevad suuremas suuruses kenad välja, muudavad teksti väiksemaks muutudes raskesti loetavaks. Seetõttu on soovitatav salvestada serifid suure teksti jaoks ja loota sansile, kui loetavus võib olla probleem. Veelgi parem, võtke omaks puhas, klanitud ja moodne fontideta välimus ja salvestage serifid trükipressi jaoks. Nii ei pea te kunagi tegelema loetavuse halvenemisega ilusa välimusega fondi kasutamise kasuks.

3 Mõelge nutikatele tsitaatidele ja muudele sümbolitele juba kujundamisprotsessi alguses

Võimalik, et olete külastanud veebisaiti, kus teatud sümboleid ei kuvata õigesti. Mõnikord asendatakse need küsimuse või kummalise välimusega tegelaste jadaga. Muul ajal neid lihtsalt pole. See juhtub sageli nutikate või lokkis jutumärkidega. Sageli on see tingitud tekstist, mis luuakse MS Wordis või mõnes muus paketis ja teisaldatakse seejärel veebilehele. Asju lihtsalt ei tõlgita soovitud viisil. See on tavaline ka euro puhul. sümbol, kahebaidised märgid ja muud välismaisest sisust võetud sümbolid.

Selle probleemi vältimiseks oma lõplikus kujunduses on teil paar võimalust. Esiteks saate nendest sümbolitest vabanemiseks oma sisu muuta. See toimib, kui olete nõus muutma sümbolid loomulikuks keeleks. Võite kasutada ka HTML-i, et tagada sümbolite õige kuvamine, mitte ainult kopeerida ja kleepida. Ükskõik, mille otsustate, testige veebilehte igas võimalikus brauseris. See, mis võib ühes brauseris sümbolitega seotud probleemi lahendada, ei pruugi teises brauseris üldse tõhus olla.

4 täiustatud CSS-oskust on äärmiselt olulised

Kui teil on head CSS-oskused, peaksid teie külastajad suutma teie veebisaidi lehtedel navigeerida täiesti sujuvalt. Kui loote stiilitabelid õigesti, võib teil olla isegi mitu sama lehe versiooni, säilitades samal ajal suure järjepidevuse tüpograafia osas. Muidugi ei pea te palju trikke kasutama. Hea CSS aitab teil vältida väikseid, kuid levinud probleeme, nagu kirjatüüpide ja fondi suuruse muutumine ühelt lehelt teisele.

Miks on järjepidev tüpograafia nii vajalik? CSS-i kasutamine järjepideva tüpograafia säilitamiseks annab teie veebisaidile professionaalse ja terava välimuse. See tähendab ka seda, et iga lehe kujundamisel ei pea te tüpograafiale mõtlema. Selle asemel kasutate lihtsalt sobivat stiilitabelit. Kui otsustate mingil konkreetsel lehel, et rikute normi ja teete tüpograafiaga midagi muud, et efekti luua või millelegi tähelepanu juhtida, paistab see tänu teie CSS-i kasutamisele rohkem silma.

5 Nii mikro- kui ka makrotüpograafia on olulised

Mikrotüpograafia on seotud tüpograafia üksikasjadega, mis on seotud loetavusega. Näiteks vahekaugused on probleem, mis on seotud mikrotüpograafiaga, nagu ka skaleerimine ja kontrast. Kohandused, mida teete tagamaks, et tekstiplokk on igas seadmes või brauseris loetav, on kõik seotud mikrotüpograafiaga.

Makrotüpograafia on seotud viisiga, kuidas teie tüpograafiaga seotud valikud seostuvad teie üldise kujundusega. See on seotud esteetikaga.

Hea tüpograafia võtab arvesse nii mikro- kui ka makrotüpograafiat. Kas olete kunagi külastanud veebisaiti, mis kasutas tõeliselt kena välimusega kohandatud fonti, mida oli samuti peaaegu võimatu lugeda? Nii juhtub, kui tähelepanu pööratakse makrotüpograafiale, kuid mitte mikrotüpograafiale.

6 Teadke nii sisu kui ka disaini

Nagu teate, on heal veebisaidil vool. Üks osa sellest on lehel oleva sisu loetavus. Oleme juba arutanud, kuidas seda mõjutavad sellised asjad nagu serifid, ja oleme arutanud, kuidas näiv tekst ei asenda tegelikku, kui tegemist on disaini hilisemate etappidega. Me ei ole veel läbi. Sisu on tõesti kuningas. Kui lõplik kujundus koos sisuga on paigas, tuleb veebileht läbi lugeda.

Kui loete sisu pärast kujunduse valmimist, saate kindlaks teha, kas tühikute või reavahetusega on probleeme või mitte. Need võivad muuta sisu segaseks või isegi tahtmatult sisu tähendust muuta. Nende probleemide lahendamine mõne tüpograafiatriki abil võib tagada, et teie lõpptoode edastab täpselt seda, mida teie või teie klient kavatseb.

7 Mõistke hierarhia tähtsust

Hierarhia on teekaart, mille annate inimestele, kes teie veebisaiti külastavad. Selle hierarhia loomiseks saate kasutada pilte, videot, värve ja (muidugi) tüpograafiat.

Asi on lihtsalt suunata külastaja esimesest asjast, mida soovite, et ta näeks, ja nii edasi. Tüpograafia abil saate kasutada suurust, fondi muudatusi ja tühikuid, et määrata kindlaks hierarhia, mida soovite, et kasutajad järgiksid. Tegelikult, kui teil on leht, mis ei konverteeri, võiksite mängida tüpograafiaga, et näha, kas teie tehtud muudatused aitavad külastajaid tegevusele kutsuva nupuni suunata.

8 Olge värvidega loominguline, kuid ettevaatlik

Lihtsaim viis tagada, et teil pole kunagi fondivärvi ja taustavärvi probleemide tõttu loetavusega probleeme, on kasutada kõige kontrastsemaid värve, must ja valge. Kahjuks võib see muuta üsna igava disaini.

Ärge kartke värve kasutada. Tegelikult ärge kartke kasutada värvikombinatsioone, mis ei paista töötavat. Mõnikord piisab lihtsalt ühe või kahe tooni heledamaks või tumedamaks muutmisest. Seejärel muutub teie tüpograafia loetamatust täiesti märgatavaks ja tõeliselt lahedaks.

9 Kraavi keskele asetatud tekst

Tsentreeritud tekstiga on palju probleeme. Ennekõike võib see muuta teie veebilehed halvasti kujundatud lendlehtedega sarnaseks. Lisaks sellele on peaaegu alati otsas kummalised veerised ja tekst, mis näib olevat mõeldud luuletuse või laineri nootidena vanast rokialbumist. Kuigi pealkirjade jaoks võib olla okei kasutada tsentreeritud teksti, on tavaliselt parem seda täielikult vältida. Jätkake vasakule kohandatud tekstiga ja teie lugejatel on teie sisu palju lihtsam lugeda.

10 Mõelge, kuidas teie tekst suurendatuna välja näeb

Inimesed muudavad teie teksti suuremaks, kas nad kasutavad pöialt ja nimetissõrme või klõpsavad suumimisnupul. Mõnikord teevad nad seda väiksema ekraani kompenseerimiseks. Muul ajal teevad nad seda lihtsalt seetõttu, et teie teksti normaalsuuruses lugemisel on neil raske lugeda.

Oleks tore, kui kõik saaksid vaadata teie teksti nii, nagu ette nähtud, kuid kuna buumitootjad vajavad teksti nägemiseks sageli lisaabi, pole see lihtsalt võimalik. Olge ettevaatlik, et mitte kasutada kirjatüüpi, mis suurendamisel halveneb.

Kasulikud tööriistad ja ressursid

Siin on mõned kasulikud tööriistad ja ressursid, mis aitavad teil tüpograafiaga rohkem hakkama saada.

• FontFace Ninja: see utiliit aitab teil tuvastada Internetist leitud fonte. See on suurepärane tööriist, kui leiate fonti, mis tõesti teie tähelepanu köidab. See Chrome’i pistikprogramm aitab teil tuvastada, leida ja osta mis tahes kaubanduslikult saadaolevat fonti, mida näete mis tahes veebisaidil.
• TypePlate: see on täielik tüpograafiaraamistik, mis sobib suurepäraselt veebidisaineritele. TypePlate saab hakkama eraldusmärgi, tsitaatide blokeerimise, skaleerimise, värvide ja paljude muude tüpograafiaga seotud probleemidega.
• Modulaarne skaala: see on skaala, mis võimaldab teil määrata ideaalse fondi ja fondi suuruse. Samuti aitab see teil luua tasakaalu pealkirjade ja pealkirjade fondi suuruse ning teksti jaoks valitud fondi vahel.
• TIFF: see tööriist võimaldab teil kuvada kaks erinevat fonti. Seejärel kuvab see teie jaoks kahe fondi erinevused. See võimaldab teil isegi võrrelda erinevaid tähti ja numbreid ühest fondist teise.
• TypeWolf: kasutage seda veebisaiti, et saada parandus Internetis kõige lahedamate fontide ja kõige inspireerivama tüpograafia kasutamise kohta. See on suurepärane inspiratsiooni ja ka teabe allikas.
• Miks fondid on olulised, Sarah Hyndman: See on suurepärane raamat, mis uurib fontide tähtsust ja viise, kuidas tüpograafia võib meeleseisundit mõjutada. See on suurepärane raamat inimestele, kes suhtuvad kirglikult tüpograafiasse, aga ka inimestele, kes võivad vajada veenmist õige töötüübi valimise tähtsuses.

Järeldus

Loodetavasti mõjutab see artikkel veebidisainereid tüpograafiale pisut rohkem mõtlema ja ka leidma viise, kuidas oma kujunduses kirjatüüpi tõhusamalt ja loomingulisemalt kasutada.