9 näpunäidet parema tüpograafilise hierarhia jaoks
Iga projekt nõuab tekstielementide süsteemi ja hierarhiat. Mõelge vaid kõigile väikestele tekstiosadele, mida kujunduses kasutatakse - pealkirjad, korpused, navigatsioonielemendid, juriidiline teave, pealdised ja nii edasi.
Kuid kuidas luua see hierarhia nii, et iga teksti element voolab sujuvalt järgmisse? Täna tutvustame teile samm-sammult tüpograafiahierarhia süsteemi, mida saab kasutada peaaegu kõigi kujundusprojektide jaoks. (Ja me ühendame näpunäited suurepärase tüpograafia kaunite näidetega, et saaksite natuke inspiratsiooni koguda.)
Uurige Envato elemente
1. Alustage mugava kehakoopiaga
Ehkki võite alustada laheda pealkirjaga, on koht alustamiseks tegelikult keskel. Esmalt määrake põhikorpuse jaoks mugav kirjatüüp, suurus ja vahekaugus.
See peaks olema mõistlik, kuna see on kujunduse põhiosa tekstist. Ükskõik, kas ehitate veebisaiti või brošüüri, on see kontseptsioon sama. Baymardi instituudi andmetel on kehakoopia ideaalne loetavus vahemikus 50 kuni 60 tähemärki rea (või veeru) kohta. See suunis aitab teil määrata loetava teksti skaala ja arvestama erinevat tüüpi kirjatüüpe (näiteks tavaline versus lühendatud versus tahvlitega).
2. Ehitage skaala
Kui teate, milline kehakoopia välja näeb, saate selle ümber määrata skaala kujunduse kõigi muude tekstielementide jaoks. Teatud tekstiplokkidest võib olla lihtne mööda vaadata; koostage nimekiri projekti kõigist erinevatest kasutusviisidest.
- Keha koopia
- Pealkirjad
- Alamrubriigid
- Tiitrid
- Blokeeri hinnapakkumised
- Navigeerimise elemendid
- Jaluse teave
- Seaduslik koopia või kohustustest loobumine
Nüüd looge skaala, mis dikteerib kõigi nende elementide kirjatüübi, suuruse vahemiku ja kasutamise. (Ja lisage see oma veebisaidide CSS-i või töödokumentide stiilifailidesse.) Skaala loomiseks on mitmeid viise, kuid suur lähtepunkt võib olla suuruse protsent. Samuti saate skaala luua matemaatika põhjal baasvõrgu taga või visuaalselt.
Siit saate alustada lihtsat skaalat:
- Korpuse koopia suurus
- Pealkirjad on keha eksemplari suurus korda 220%
- Alamrubriigid on keha koopia suurus 150%
- Navigeerimiselementide korpuse suurus on 80%
- Jaluse / seadusliku koopia keha suurus korda 80%
3. Mõelge suurimast väikseimale, ülalt alla
See reegel on üsna lihtne: suurim ja kõige olulisem tekst peaks olema ülaosas ning lehe või ekraani lugedes peaksid suurused vähenema.
See ei tähenda, et te ei saaks seda reeglit aeg-ajalt teatud kujunduse täpsusega rikkuda, kuid see peaks alati olema tüpograafilise hierarhia väljatöötamise lähtepunkt. (Kes tõepoolest kerib pealkirja veebilehe lõpuni ja seejärel lugemise alustamiseks tagasi üles?)
4. Kehtestage kosmosereeglid
Sama oluline kui tähtede suurus on tühik selle vahel ja ümber. Ruumi määramise tegurite hulka kuuluvad eesmine (või joonekõrgus), taanded (või mitte), mähised ja vihmaveetorud ning joondamine.
Mõelge vahekauguste proportsioonidele, mis peegeldavad teksti suuruse määramisel kasutatavat skaalat. Ka lõuendi suurus on siin üsna oluline. Suuremad lõuendid on loetavad tihedama vahega kui väikesed lõuendid. (Sellepärast on paljudel projektidel palju vabamad vahekauguse spetsifikatsioonid sellistele seadmetele nagu mobiiltelefonid ja rangemad reeglid lauaarvutitele.)
Nii nagu kirjatüübisuuruste puhul, tuleks ka kogu kujundusraami jaoks eelnevalt ette seada vahede reeglid. Järjepidev, puhas vahekaugus on üks väike asi, mis võib kujunduse muuta või selle purustada.
5. Määrake reeglid paksus kirjas ja kaldkirjas
Paksus kirjas ja kaldkirjas ei ole erinevat tüüpi elemente ega suurusi, kuid kasutamine on oluline. (Kujutage lihtsalt välja, milline kujundus välja näeb, kui iga teine sõna on paksus kirjas.)
See muudab rasvases ja kaldkirjas toodud juhised eriti oluliseks. Selle asemel, et vaadata suurust või ruumi, on kaalumine siiski palju kontekstuaalsem. Kasutustingimustes võidakse öelda, et ainult nii palju sõnu või fraase (või konkreetseid sõnu või fraase) saab seda käsitleda. Julge ja kaldkirja liigkasutamine on tavaline viga. kui see kahtleb, ära kasuta seda.
6. Looge „Z”
Üldine lugemismuster on Z-kujuline. Kas loote keelt, mis loeb vasakult paremale või paremalt vasakule (pöörake Z-i), loevad kasutajad ühest nurgast üle joone lõpuni ja seejärel tagasi algusnurgast ja üle joone korduva mustrina.
Kasutage seda looduslikku voogu tekstielementide ekraanile paigutamisel. Selle Z-kuju tõttu paneb enamik kaubamärke oma logo vasakusse ülanurka. See on esimene koht, kuhu silm lugedes maandub.
7. Mõelge visuaalsele kaalule
Suurus pole ainus tegur, kui räägitakse, kui suur tekstielement ekraanil välja näeb. Visuaalne kaal on sama oluline ja võib mõjutada seda, kuidas loote tüpograafilist skaalat.
Kirjatüübid näevad suuremad, kui:
- Nende hulka kuuluvad paksud löögikaalud
- Nende hulka kuuluvad õied või kaunistused
- Nad on laiad
- Need on uudsed põhitüüpi kirjatüübid
- Neil on pikemad x-kõrgused
- Neid kasutatakse kõigi korkidena
Kirjatüübid näevad väiksemad välja, kui:
- Need on kondenseerunud
- Nende hulka kuuluvad kerged või õhukesed löögilaiused
- Taustal on vähe kontrasti
- Neid kasutatakse väiketähtedega
8. Loo aktsente
On teatud sõnu, mida soovite esile tõsta ja mis jäävad tavalisest tüpograafilisest skaalast pisut välja. Tähtedele aktsendi lisamine võib selle eristuda, ilma et peaksite tegelikku suurust või kirjatüüpi kohandama.
Tavaliste aktsentide hulka kuuluvad:
- Värv
- Allajoonitud
- Tõstke esile
- Tekst nupul või kujundil
- Lihtne animatsioon
- Muutus juhuks, kui sama tüüpi teist tüüpi
Tore hierarhia mis tahes aktsendi juures on tore see, et see on kohene tähelepanu köitja. Neid elemente tuleks kõige säästlikumalt kasutada disaini suurima mõju ja võtmeelementide jaoks.
9. Kasutage silmade testi
Lõpuks on igal reeglil erand (või kaks). Sealt tulebki “silmaproov”. Vaadake lihtsalt ekraanil olevat skaalat. Kuidas tekst teile tundub? Kas on loogiline voog? Kas seda on lihtne lugeda?
Kui see tundub kuidagi halb, kaaluge skaala muutmist. Sõltuvalt kasutatavast kirjatüübist ja muudest kujunduselementidest - piltidest värvide ja kontrastideni - vajab skaala teiepoolset kohandamist. See on alles lähtepunkt, kui te pole kindel, mida soovite teha.
Ja paluge ka teisi silmi. Looge üks või kaks erineva hierarhiaga versiooni, et näha, milline versioon saab parima vastuse. Kujundus on kujutav kunst, mis teeb „silmatesti” ebatäpseks, kuid üsna usaldusväärseks võimaluseks.
Järeldus
Kui olete projekti tüpograafilise hierarhia määranud, on kõige parem seda teha, kui dokumenteerite. Veebisaitide jaoks määrake CSS-i skaala või looge prinditud projektidega töötades stiilifailid.
Suurema ulatusega kujunduse või kaubamärgi korral pange mõõtkava ja spetsifikatsioonid kirjalikult stiilijuhendisse. Tüüpihierarhia loomine nõuab pisut tööd tagaküljele, kuid muudab projektide lõpuleviimise kiiremaks, lihtsamaks ja järjekindlamaks, kui liigute järgmiste projektidega edasi.
