V úterý pozdě večer obnovíte úvodní stránku. Nadpis je v pořádku, fotky taky, a přesto návštěvníci odcházejí během pár vteřin. Začnete se ptát, jestli právě hierarchie písma není to, co jste přehlíželi. Často je. Drobná vizuální rozhodnutí utvářejí první dojem rychleji, než většina podnikatelů čeká.
Hierarchie písma využívá velikost, tloušťku a mezery, aby ukázala, který text je nejdůležitější. Tato kapitola jednoduše vysvětluje, co to znamená, proč to ovlivňuje váš web i marketing a jak to uplatnit bez zbytečného žargonu. Uvidíte také, jak do stejného obrazu zapadá vizuální hierarchie. Projděme si to krok za krokem.
Co je hierarchie písma a proč na ní záleží
Hierarchie písma využívá velikost, tloušťku a mezery, aby ukázala, který text je nejdůležitější.
V praxi se hierarchie písma objevuje v záhlavích webu, na stránkách služeb, v grafice pro sociální sítě i v tištěných materiálech. Když ji správně pojmenujete, zadáte práci designérům rychleji a návrhy posoudíte s jistotou.
Souvisí s ní přímo i další myšlenky, třeba vizuální hierarchie. Mějte je na paměti při čtení zbytku tohoto modulu.
Jasná hierarchie pomáhá těm, kdo text jen prolétnou, rychle najít nadpisy, podnadpisy a akce.
Proč záleží vaší firmě na hierarchii písma a na tom, proč je důležitá?
Zákazníci posuzují důvěryhodnost podle rozvržení dřív, než přečtou každé slovo. Jasná vizuální struktura snižuje tření a usnadňuje pochopení nabídky.
Vizuální hierarchie stránky silně závisí na typografických úrovních.
Styly H1 až H3 nadefinujte jednou a používejte je na každé šabloně.
Chcete-li vidět, jak to souvisí se sousedními tématy, přečtěte si dál kapitoly typografie na webu a druhy písem.
Praktický kontrolní seznam na dnešek
Styly H1 až H3 nadefinujte jednou a používejte je na každé šabloně.
Když kontrolujete jakoukoli stránku, ptejte se, zda je hierarchie písma vidět už při prvním posunu na mobilu. Pokud ne, přeskládejte sekce dřív, než začnete ladit detaily.
Ukládejte si snímky obrazovky před změnou a po ní, abyste poznali, co u hierarchie písma na vašem webu skutečně zabralo.
Sdílejte tento seznam s každým, kdo váš web upravuje, aby vizuální hierarchie zůstala jednotná i na nových stránkách.
Vyberte si jedno číslo, které budete tento měsíc sledovat, například čas na stránce nebo zahájená vyplnění formuláře. Změny designu pak svážete s výsledky podnikání, a ne jen s vkusem.
Jak toto téma souvisí s celou vaší značkou
Vizuální rozhodnutí málokdy žijí jen na jedné stránce. Vizuální hierarchie stránky silně závisí na typografických úrovních.
Vaše příspěvky na sociálních sítích, e-maily i tištěné materiály by měly opakovat stejnou hierarchii, barvy a pravidla písma jako váš web.
Když se vizuální podoba značky rozchází, zákazníci cítí nenápadný nesoulad, i když nedokážou říct proč.
Podívejte se na pravidla typografie a porovnejte si poznatky se související kapitolou tohoto modulu.
Jasná hierarchie pomáhá těm, kdo text jen prolétnou, rychle najít nadpisy, podnadpisy a akce.
Časté otázky, které lidé přehlížejí
Související pojmy jako vizuální hierarchie a pravidla typografie vám pomohou najít další příklady a porovnat vaši práci s běžnými standardy.
Vizuální hierarchie stránky silně závisí na typografických úrovních.
Zapište si jednu změnu před a po, kterou tento týden otestujete na živé stránce. Malé změřené úpravy porazí vágní plány.
Společná slovní zásoba týmu kolem hierarchie písma zkracuje kola úprav s designéry a agenturami.
Nástroje, které usnadní vizuální úpravy
K řadě úprav rozvržení a stylu nepotřebujete vlastní kód. Vizuální editor vám umožní upravit mezery, barvy a písmo a přitom si prohlížet náhled pro mobil i počítač.
WEMASY obsahuje Tvůrce webů s vizuálními úpravami, takže změny zveřejníte, aniž byste u každé drobnosti čekali na vývojáře. Až budete chtít využít, co jste se naučili, otevřete Tvůrce webů.
Když zveřejníte úpravy, znovu si projděte typografie na webu a druhy písem, aby si modul v hlavě držel pohromadě.
Teď už máte pro hierarchii písma funkční pohled. Použijte ho při kontrole webu, schvalování marketingových materiálů nebo zadání pro designéra. Pokračujte kapitolami druhy písem a pravidla typografie a udržte v tomto modulu tempo.
Často kladené otázky
Jak dlouho trvá zlepšit hierarchii písma?
Většina malých firem má přehlednější stránky už po několika soustředěných sezeních, když použije základy z této kapitoly. Začněte úvodní stránkou a stejná pravidla pak přeneste na stránky služeb a kontaktu.
Potřebujete designéra na hierarchii písma?
Designér pomůže u složitého rebrandingu, ale řadu oprav kolem hierarchie písma zvládnete sami, jakmile víte, na co se dívat. Souvisejícím tématem je typografie na webu.
Může WEMASY pomoci s hierarchií písma na vašem webu?
WEMASY má v Tvůrci webů vizuální editor, takže rozvržení, barvy a písmo upravíte bez kódu. Otevřete Tvůrce webů, upravte šablony a prohlédněte si náhled na mobilu.
Jaká je nejčastější chyba u hierarchie písma?
Lidé se snaží opravit všechno najednou místo jedné stránky po druhé. Vyberte jednu prioritu, třeba čitelnost nebo kontrast, a pak se podívejte na druhy písem, co zlepšit dál.
Jak souvisí hierarchie písma se SEO?
Jasná vizuální hierarchie a čitelné písmo udrží návštěvníky na stránce déle, což podporuje signály zapojení, které vyhledávače sledují. Opravy designu spojte s promyšlenou strukturou obsahu a výsledek bude nejlepší.
Co se učit dál po hierarchii písma?
Pokračujte v této knize kapitolami typografie na webu a druhy písem a vybudujte kompletní vizuální systém své značky online.