Innehåll
Den här artikeln publicerades först i nummer 229 av tidningen .net - världens bästsäljande tidning för webbdesigners och utvecklare.
En av de viktigaste sakerna du kan fokusera på när det gäller att lägga ut en sida i HTML / CSS är vertikal rytm - det visuella mönstret som typblocken eller linjerna av typen bildar när du skannar ner på sidan.
Andra saker kan komma att påverka denna rytm som rubriker, listobjekt, bilder och så vidare. Att ha god vertikal rytm är av största vikt eftersom det hjälper läsbarheten och skanningsförmågan på dina sidor.
Det finns en hel del bra självstudier (se till exempel här och här) på webben där du kan hitta information om hur man tekniskt uppnår rätt vertikal rytm genom att använda ems för din linjehöjd och lära dig vad som håller din typ "i fas" innebär att.
Hierarki
De grundläggande sakerna att vara noga med är linjehöjd mellan element och övergripande visuell hierarki på sidan. Att ställa in rätt linjehöjdsproportioner kan vara en involverad designövning men det är viktigt att bemästra. Hierarki är också viktigt, eftersom bilder och textelement ska vara i harmoni med varandra visuellt - de viktigaste sakerna är i allmänhet större och kommer först på sidan.
Tryckdesigners har hanterat idén om vertikal rytm i många år och det är först inom det senaste förflutna som webbdesigners verkligen har fått göra det här. Med det ständigt ökande behovet av att bygga ut webbplatser med hjälp av rutnätlayouter och vara uppmärksam på responsiva implementeringar för att tillgodose flera skärmbredder, är det viktigare nu än någonsin ur ett visuellt designperspektiv, förmodligen mer än bara ett tekniskt.
Fem exempel att kolla in
1. Elementen i typografisk stil Denna bok av Robert Bringhurst är standarden för typografistudier. Läs det, konsumera det, häll det i din hjärna så som du kan.
2. Frank Chimero Bortsett från att vara helt fantastisk i allmänhet, visar den nya redesignen av designern Frank Chimeros personliga webbplats en suverän vertikal rytm. Han använder en parallaxeffekt för att hjälpa till att köra rytmen hem när du bläddrar ner sidan också.
3. Dan Cederholm För ett bra exempel på bra typografisk vertikal rytm, ta en titt på Dan Cederholms blogg. Linjehöjden på kopian och rubrikerna står i perfekt proportion.
4. Fokuslabb Webbdesign- och varumärkesföretaget Focus Lab använder hierarki skickligt för att hjälpa till att kommunicera vad som är viktigast för besökaren.
5. Typofonderie Webbplatsen för Typography Studio Typofonderie har stor vertikal rytm med sina bilder och text. Avståndet mellan elementen är proportionellt över hela webbplatsen och hierarkin mellan huvudbilden och sekundära bilder / sektioner är perfekt.
Upptäck 10 fantastiska exempel på experimentell design på Creative Bloq.
