Obsah
Tento článok sa prvýkrát objavil v čísle 229 časopisu .net - najpredávanejšieho časopisu na svete pre webových dizajnérov a vývojárov.
Jednou z najdôležitejších vecí, na ktoré sa môžete sústrediť pri rozložení stránky v HTML / CSS, je vertikálny rytmus - vizuálny vzor, do ktorého sa formujú bloky typu alebo riadky typu pri skenovaní stránky.
Na rytmus môžu mať vplyv ďalšie veci, ako napríklad nadpisy, položky zoznamu, obrázky atď. Dobrý vertikálny rytmus je prvoradý, pretože pomáha čitateľnosti a skenovateľnosti vašich stránok.
Na webe je pomerne veľa skvelých tutoriálov (pozrite si napríklad tu a tu), kde nájdete informácie o tom, ako technicky dosiahnuť správny vertikálny rytmus pomocou ems pre vašu výšku riadku a dozvedieť sa, čo udržuje váš typ „vo fáze“. znamená.
Hierarchia
Základné veci, ktorým je potrebné venovať osobitnú pozornosť, sú výška riadkov medzi prvkami a celková vizuálna hierarchia na stránke. Nastavenie správnych proporcií výšky čiary môže byť spojené s návrhovým cvičením, ale je dôležité si ho osvojiť. Hierarchia je tiež dôležitá v tom, že obrázky a textové prvky by mali byť navzájom vizuálne v súlade - najdôležitejšie veci sú spravidla väčšie a na stránke sú na prvom mieste.
Dizajnéri tlače sa myšlienkou vertikálneho rytmu zaoberali mnoho rokov a až v nedávnej minulosti sa weboví dizajnéri museli do týchto vecí skutočne pustiť. S neustále sa zvyšujúcou potrebou budovať webové stránky pomocou rozloženia mriežky a venovať pozornosť responzívnym implementáciám, ktoré vyhovejú viacerým šírkam obrazovky, je teraz z hľadiska vizuálneho dizajnu dôležitejšie než kedykoľvek predtým, pravdepodobne viac než len technické hľadisko.
Päť príkladov na vyskúšanie
1. Prvky typografického štýlu Táto kniha od Roberta Bringhursta je štandardom pre štúdium typografie. Prečítajte si, skonzumujte, nalejte do mozgu akýmkoľvek spôsobom.
2. Frank Chimero Okrem toho, že je vo všeobecnosti absolútne úžasný, nedávny redizajn osobného webu dizajnéra Franka Chimera vykazuje vynikajúci vertikálny rytmus. Pri posúvaní stránky nadol používa efekt paralaxy, ktorý pomáha riadiť rytmus domov.
3. Dan Cederholm Dobrým príkladom skvelého typografického vertikálneho rytmu je blog Dan Cederholm. Výška riadkov kópie a nadpisov je v dokonalom pomere.
4. Zameranie laboratória Firma Focus Lab zaoberajúca sa webovým dizajnom a brandingom používa obratne hierarchiu, aby pomohol komunikovať to, čo je pre návštevníka najdôležitejšie.
5. Typofonderie Webové stránky Typografického štúdia Typofonderie majú vynikajúci vertikálny rytmus s obrázkami a textom. Rozstupy medzi prvkami sú proporčné na celej webovej stránke a hierarchia medzi hlavným obrázkom a sekundárnymi obrázkami / sekciami je dokonalá.
Objavte 10 úžasných príkladov experimentálneho dizajnu na serveri Creative Bloq.
