Onko sinulla prosessi typografisen hierarkian luomiseen verkkosivustoillasi ja sovelluksissasi? Jos ei, jatka lukemista. Tässä viestissä tutkimme kolmea vaihetta, jotka tarvitaan tekstin tasojen ja komponenttien tunnistamiseen, niiden kokoa ja skaalaamista sekä tyyliä tarvittaessa.
Kirjoittajana otan hierarkian huomioon aina kun luon uutta sisältöä. Kukaan ei aio lukea jokaista kirjoittamaani sanaa, ja tämän tueksi on paljon katseenseurantatutkimuksia. Siksi typografinen hierarkia on niin tärkeä.
Ainoa asia on että me kirjoittajat voimme tehdä sillä vain niin paljon Kun kirjoitan sisältöä
verkkosivulle, blogikirjoitukselle tai verkkokaupan tuotesivulle Google-dokumenteissa, voin tehdä perusmuotoiluja. Käytän erilaisia otsikkotasoja sisällön järjestämiseen. Lisään tyylillisiin lainauksiin tai kuvateksteihin lihavoinnin tai kursivoitun. Sellaista.
Vielä on kuitenkin tehtävä, ennen kuin sisältöni ja suositeltu hierarkkinen rakenne voidaan julkaista verkossa. Siellä sinä web-suunnittelijana tai -kehittäjänä tulet mukaan.
Tässä viestissä tarkastelemme, mitä typografinen hierarkia on, miksi se on tärkeää, ja perusprosessia, jonka avulla voit luoda ainutlaatuisen typografisen hierarkian jokaiselle rakentamallesi verkkosivustolle.
Miksi typografinen hierarkia on tärkeä?
Typografinen hierarkia viittaa tapaan, jolla teksti on järjestetty ja muotoiltu. Tavoitteena on parantaa käyttäjien skannaus- ja lukukokemusta suunnittelemalla erityyppistä tekstiä ainutlaatuisella, mutta johdonmukaisella tavalla.
Tämä on esimerkki äskettäin julkaistusta blogikirjoituksesta, jonka otsikko on ” Perfecting Collection Management with the .NET MAUI CollectionView .” Vasemmalla on kuvakaappaus julkaisun viidestä ensimmäisestä kappaleesta sekä ensimmäinen H2-otsikko. Oikealla on sama teksti ilman tyyliä:
Vierekkäinen vertailu Telerik-blogin tekstistä. Vasemmalla puolella on kuvakaappaus, joka näyttää kuinka teksti on järjestetty ja Päivitetty puhelinnumero 2024 maailmanlaajuisesti muotoiltu sivulla tällä hetkellä. Viestin yhteenvetoteksti on suurempi kuin tavallinen leipäteksti. Suunnitelma-otsikko on suurempi kuin yhteenveto ja runko ja myös rohkeampi.
Voit nähdä kuinka kahden tekstielementin muotoilu tekee maailmasta eron kun luet tätä
blogikirjoitusta. Se, mikä näyttää loputtomalta kappaleiden seinältä oikealla, on muutettu paremmin järjestetyksi sivuksi vasemmalla.
Koska kappaleen teksti muodostaa ટફોર્મ પરથી સોશિયલ મીડિયા કન્ટેન્ટને suurimman osan sivusta, käytetään sitä lähtökohtanamme. Fontti on nimeltään Metric ja tekstin koko on 20 pikseliä.
Yhteenvetoteksti (ensimmäinen kappale yläreunassa) käyttää samaa fonttia. Se on kuitenkin 28px. Tämä kokoero saa silmämme ja aivomme america email list keskittymään ensin yhteenvetoon. Se on isompi, joten sen täytyy olla tärkeämpää tai ainakin arvokkaampaa luettavaksi ennen kuin kaivellaan postauksen sisältöön.
“Plan” H2-otsikko käyttää myös Metric-fonttia. Se on 45 kuvapistettä, joten se on huomattavasti suurempi kuin muut sivun tekstielementit (ylhäällä olevan H1-otsikon lisäksi). Siinä on myös ainutlaatuinen muotoilu, kuten raskaampi paino ja tiukemmat välit.
Useimmat meistä ovat käyttäneet Internetiä tarpeeksi kauan, jotta etsimme luonnollisesti näitä visuaalisia vihjeitä. Niiden avulla on helpompi skannata sivu ja saada korkeatasoinen yhteenveto siitä, mitä tarkastelemme. Mutta niitä ei olisi helppo löytää tai lukea, jos suunnittelijat eivät antaisi heille tällaista erityiskohtelua.
Kuinka rakentaa typografinen hierarkia verkkosivustollesi
On olemassa kolme perusvaihetta, jotka auttavat sinua luomaan ainutlaatuisen typografisen hierarkian verkkosivustollesi tai sovelluksellesi.
1. Määritä, kuinka monta tasoa tarvitset
Tyypillisesti verkkosivustolla on vähintään kolme hierarkiatasoa. Käytämme Ahead Digitalin “Keitä me olemme” -sivua osoittamaan, mitä nämä olennaiset tasot ovat.
