Indhold
Denne artikel optrådte først i nummer 229 af .net magazine - verdens bedst sælgende magasin til webdesignere og udviklere.
En af de vigtigste ting, du kan fokusere på, når det kommer til at lægge en side i HTML / CSS, er lodret rytme - det visuelle mønster, som typeblokkene eller typelinierne danner, når du scanner ned på siden.
Andre ting kan påvirke denne rytme som overskrifter, listeelementer, billeder osv. At have god lodret rytme er altafgørende, fordi det hjælper læsbarheden og scanningsevnen på dine sider.
Der er en hel del gode tutorials (se f.eks. Her og her) på nettet, hvor du kan finde ud af, hvordan du teknisk opnår korrekt lodret rytme ved at bruge ems til din linjehøjde og lære om, hvad der holder din type 'i fase' midler.
Hierarki
De grundlæggende ting, man skal være meget opmærksom på, er linjehøjde mellem elementer og det overordnede visuelle hierarki på siden. Det kan være en involveret designøvelse at indstille korrekte linjehøjde-forhold, men det er vigtigt at mestre. Hierarki er også vigtigt, idet billederne og tekstelementerne skal være i harmoni med hinanden visuelt - de vigtigste ting er generelt større og kommer først på siden.
Printdesignere har beskæftiget sig med ideen om lodret rytme i mange år, og det er først inden for den seneste tid, at webdesignere virkelig har været nødt til at komme ind i disse ting. Med det stadigt stigende behov for at opbygge websteder ved hjælp af gitterlayouts og være opmærksom på lydhøre implementeringer for at imødekomme flere skærmbredder, er det vigtigere nu end nogensinde før fra et visuelt designperspektiv, sandsynligvis mere end bare et teknisk.
Fem eksempler at tjekke ud
1. Elementerne i typografisk stil Denne bog af Robert Bringhurst er standarden for typografistudie. Læs det, forbrug det, hæld det i din hjerne, som du kan.
2. Frank Chimero Bortset fra at være helt fantastisk generelt, viser det nylige redesign af designer Frank Chimeros personlige websted en fremragende lodret rytme. Han bruger en parallax-effekt til at hjælpe med at køre rytmen hjem, når du også ruller siden ned.
3. Dan Cederholm For et godt eksempel på god typografisk lodret rytme, se Dan Cederholms blog. Linjehøjden på kopien og overskrifterne er i perfekt forhold.
4. Fokus Lab Webdesign- og brandingsfirmaet Focus Lab bruger hierarki behændigt til at hjælpe med at kommunikere, hvad der er vigtigst for den besøgende.
5. Typofonderie Webstedet for Typography Studio Typofonderie har stor lodret rytme med sine billeder og tekst. Afstanden mellem elementer er proportionalt over hele hjemmesiden, og hierarkiet mellem hovedbilledet og sekundære billeder / sektioner er perfekt.
Oplev 10 fantastiske eksempler på eksperimentelt design på Creative Bloq.
