Obsah
Tento článek se poprvé objevil v čísle 229 časopisu .net - světově nejprodávanějšího časopisu pro webové designéry a vývojáře.
Jednou z nejdůležitějších věcí, na které se můžete zaměřit při rozvržení stránky v HTML / CSS, je vertikální rytmus - vizuální vzor, do kterého se formují bloky typu nebo řádky typu při skenování dolů.
Na tento rytmus mohou mít vliv další věci, jako jsou nadpisy, položky seznamu, obrázky atd. Mít dobrý vertikální rytmus je prvořadé, protože to pomáhá čitelnosti a skenovatelnosti vašich stránek.
Na webu je spousta skvělých tutoriálů (viz zde a zde), kde najdete informace o tom, jak technicky dosáhnout správného vertikálního rytmu pomocí ems pro výšku řádku a dozvědět se, co udržuje váš typ „ve fázi“ prostředek.
Hierarchie
Základní věci, kterým je třeba věnovat zvláštní pozornost, jsou výška čáry mezi prvky a celková vizuální hierarchie na stránce. Nastavení správných proporcí výšky čáry může být zapojené do návrhového cvičení, ale je důležité si ji osvojit. Hierarchie je také důležitá v tom, že obrázky a textové prvky by měly být navzájem vizuálně v souladu - nejdůležitější věci jsou obecně větší a na stránce jsou na prvním místě.
Tiskoví designéři se myšlenkou vertikálního rytmu zabývali mnoho let a weboví designéři se do těchto věcí museli skutečně pustit až v nedávné minulosti. S neustále se zvyšující potřebou vytvářet webové stránky pomocí rozvržení mřížky a věnovat pozornost responzivním implementacím, aby vyhovovaly různým šířkám obrazovky, je nyní z hlediska vizuálního designu důležitější než kdykoli předtím, pravděpodobně více než jen technická.
Pět příkladů k vyzkoušení
1. Prvky typografického stylu Tato kniha od Roberta Bringhursta je standardem pro studium typografie. Přečtěte si to, konzumujte to, nalijte si to do mozku jakýmkoli způsobem.
2. Frank Chimero Kromě toho, že je obecně naprosto úžasný, nedávný redesign osobních webových stránek designéra Franka Chimera vykazuje vynikající vertikální rytmus. Při posouvání stránky dolů používá efekt paralaxy, který pomáhá řídit rytmus domů.
3. Dan Cederholm Dobrým příkladem skvělého typografického vertikálního rytmu je blog Dana Cederholma. Výška řádku kopie a nadpisů je v dokonalém poměru.
4. Zaměření laboratoře Firma Focus Lab zabývající se webovým designem a brandingem obratně využívá hierarchii, aby pomohla sdělit to, co je pro návštěvníka nejdůležitější.
5. Typofonderie Web pro Typography Studio Typofonderie má skvělý vertikální rytmus s obrázky a textem. Mezery mezi prvky jsou proporcionální na celém webu a hierarchie mezi hlavním obrázkem a sekundárními obrázky / oddíly je dokonalá.
Objevte 10 úžasných příkladů experimentálního designu na Creative Bloq.
