Sisältö
Tämä artikkeli ilmestyi ensimmäisen kerran .net-lehden 229. numerossa - maailman myydyimmässä verkkosivujen suunnittelijoille ja kehittäjille suunnatussa lehdessä.
Yksi tärkeimmistä asioista, joihin voit keskittyä sivun asettamisessa HTML / CSS: ssä, on vertikaalinen rytmi - visuaalinen kuvio, johon tyyppilohkot tai tyyppirivit muodostuvat, kun skannaat sivua alaspäin.
Muut asiat voivat vaikuttaa tähän rytmiin, kuten otsikot, luettelokohteet, kuvat ja niin edelleen. Hyvä vertikaalinen rytmi on ensiarvoisen tärkeää, koska se auttaa sivujesi luettavuutta ja skannauskykyä.
Verkossa on melko monta upeaa opetusohjelmaa (katso esimerkiksi täältä ja täältä), josta löydät kuinka saavuttaa teknisesti oikea pystysuora rytmi käyttämällä ems-viivojasi korkeudelle ja oppimalla mitä pidät tyypisi '' vaiheessa '' tarkoittaa.
Hierarkia
Perusasiat, joihin on kiinnitettävä erityistä huomiota, ovat elementtien välinen viivan korkeus ja sivun yleinen visuaalinen hierarkia. Oikean viivan ja korkeuden mittasuhteiden asettaminen voi olla mukana suunnitteluharjoituksessa, mutta on tärkeää hallita. Hierarkia on tärkeää myös siinä mielessä, että kuvien ja tekstielementtien tulisi olla visuaalisesti sopusoinnussa - tärkeimmät asiat ovat yleensä suurempia ja tulevat sivun ensimmäisiksi.
Painosuunnittelijat ovat käsitelleet vertikaalisen rytmin ajatusta monta vuotta, ja vasta viime aikoina web-suunnittelijoiden on täytynyt todella päästä mukaan tähän. Koska verkkosivustojen rakentaminen verkkorakenteiden avulla ja kiinnittämällä huomiota reagoiviin toteutuksiin on jatkuvasti kasvava, useiden näytön leveyksien sovittamiseksi on visuaalisen suunnittelun näkökulmasta nyt tärkeämpää kuin koskaan ennen, luultavasti enemmän kuin vain tekninen.
Viisi esimerkkiä
1. Typografisen tyylin elementit Tämä Robert Bringhurstin kirja on typografiatutkimuksen standardi. Lue se, kuluta se, kaada se aivoihisi kaikin tavoin.
2. Frank Chimero Sen lisäksi, että suunnittelija Frank Chimeron henkilökohtainen verkkosivusto on äskettäin uudistettu, se on erinomainen vertikaalinen rytmi. Hän käyttää parallaksivaikutusta auttaakseen rytmiä kotiin samalla kun vierität sivua alaspäin.
3. Dan Cederholm Katso hyvä esimerkki upeasta typografisesta pystysuorasta rytmistä tutustumalla Dan Cederholmin blogiin. Kopion ja otsikoiden viivan korkeus on täydellisessä suhteessa.
4. Tarkennuslaboratorio Verkkosuunnittelu- ja brändäysyritys Focus Lab käyttää hierarkiaa taitavasti kommunikoimaan kävijälle tärkeimmistä.
5. Typofonderie Typography Studio Typofonderien verkkosivustolla on suuri vertikaalinen rytmi kuvien ja tekstin kanssa. Elementtien välinen etäisyys on suhteessa koko verkkosivustoon, ja pääkuvan ja toissijaisten kuvien / osioiden välinen hierarkia on täydellinen.
Löydä 10 upeaa esimerkkiä kokeellisesta suunnittelusta Creative Bloqissa.
