Innhold
Denne artikkelen dukket opp første gang i nummer 229 av .net magazine - verdens mest solgte magasin for webdesignere og utviklere.
En av de viktigste tingene du kan fokusere på når det gjelder å legge ut en side i HTML / CSS, er vertikal rytme - det visuelle mønsteret som typeblokkene eller typelinjene danner når du skanner nedover siden.
Andre ting kan påvirke denne rytmen, som overskrifter, listeelementer, bilder og så videre. Å ha god vertikal rytme er viktigst fordi det hjelper lesbarheten og skanneevnen til sidene dine.
Det er ganske mange flotte opplæringsprogrammer (se for eksempel her og her) på nettet der du kan finne ut hvordan du teknisk oppnår riktig vertikal rytme ved å bruke ems for linjene og lære om hva som holder typen din 'i fase' midler.
Hierarki
De grunnleggende tingene du må være nøye med er linjehøyde mellom elementene og det overordnede visuelle hierarkiet på siden. Å sette riktige linjehøyde-proporsjoner kan være en involvert designøvelse, men det er viktig å mestre. Hierarki er også viktig ved at bildene og tekstelementene skal være i harmoni med hverandre visuelt - de viktigste tingene er generelt større og kommer først på siden.
Trykkdesignere har jobbet med ideen om vertikal rytme i mange år, og det er først i den siste tiden at webdesignere virkelig har måttet komme inn i disse tingene. Med det stadig økende behovet for å bygge ut nettsteder ved hjelp av rutenettoppsett og ta hensyn til responsive implementeringer for å imøtekomme flere skjermbredder, er det viktigere nå enn noen gang fra et visuelt designperspektiv, sannsynligvis mer enn bare et teknisk.
Fem eksempler å sjekke ut
1. Elementene i typografisk stil Denne boka av Robert Bringhurst er standarden for typografistudier. Les den, konsum den, hell den i hjernen din slik du kan.
2. Frank Chimero Bortsett fra å være helt fantastisk generelt, viser den nylige redesigningen av designeren Frank Chimeros personlige nettside en ypperlig vertikal rytme. Han bruker en parallakseffekt for å hjelpe til med å drive rytmen hjem mens du også ruller siden ned.
3. Dan Cederholm For et godt eksempel på god typografisk vertikal rytme, ta en titt på Dan Cederholms blogg. Linjehøyden på kopien og overskriftene er i perfekt proporsjon.
4. Fokus Lab Nettdesign- og merkevarefirmaet Focus Lab bruker hierarki behendig for å kommunisere det som er viktigst for den besøkende.
5. Typofonderie Nettstedet for Typography Studio Typofonderie har god vertikal rytme med bilder og tekst. Avstanden mellom elementene er proporsjonert over hele nettstedet, og hierarkiet mellom hovedbildet og sekundære bilder / seksjoner er perfekt.
Oppdag 10 fantastiske eksempler på eksperimentell design på Creative Bloq.
