Rozvržení není dekorace. Je to struktura. Když návrh rozvržení berete jako obchodní dovednost, děláte méně drahých odhadů a vytváříte stránky, které lidi vedou k akci.
Návrh rozvržení uspořádává obsahové bloky, navigaci a média na stránce nebo obrazovce. 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á rozvržení webu. Projděme si to krok za krokem.
Co je návrh rozvržení
Návrh rozvržení uspořádává obsahové bloky, navigaci a média na stránce nebo obrazovce.
V praxi se návrh rozvržení objevuje v záhlavích webu, na stránkách služeb, v grafikách pro sociální sítě i v tištěných materiálech. Když ho pojmenujete správně, zadáte práci designérům rychleji a návrhy posoudíte s jistotou.
Přímo souvisejí i další pojmy, třeba rozvržení webu. Mějte je na paměti, když budete číst zbytek tohoto modulu.
Dobrý návrh rozvržení umožní najít informace na jakémkoli zařízení.
Proč na návrhu rozvržení pro vaše podnikání záleží?
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.
Šablony rozvržení webu by měly opakovat vzory, aby se uživatelé učili jen jednou.
Načrtněte pro úvodní stránku mřížku se zónami záhlaví, hlavního bloku, důkazů a zápatí.
Chcete-li vidět souvislosti se sousedními tématy, přečtěte si dál rozvržení webu a vizuální vyvážení v designu.
Praktický seznam, který můžete použít hned dnes
Načrtněte pro úvodní stránku mřížku se zónami záhlaví, hlavního bloku, důkazů a zápatí.
Když kontrolujete jakoukoli stránku, ptejte se, zda je návrh rozvržení patrný 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 návrhu rozvržení na vašem webu skutečně zabralo.
Sdílejte tento seznam s každým, kdo váš web upravuje, aby rozvržení webu zůstalo jednotné i na nových stránkách.
Vyberte si na tento měsíc jedno číslo ke sledování, třeba čas na stránce nebo počet zahájených formulářů, aby změny designu souvisely 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. Šablony rozvržení webu by měly opakovat vzory, aby se uživatelé učili jen jednou.
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ály značky rozcházejí, zákazníci cítí nepatrný nesoulad, i když ho neumějí vysvětlit.
Podívejte se na zarovnání v designu a porovnejte si poznatky se související kapitolou tohoto modulu.
Dobrý návrh rozvržení umožní najít informace na jakémkoli zařízení.
Časté otázky, které lidé přehlížejí
Související pojmy jako rozvržení webu a vizuální hierarchie vám pomohou najít další příklady a porovnat vaši práci s běžnými standardy.
Šablony rozvržení webu by měly opakovat vzory, aby se uživatelé učili jen jednou.
Zapište si jednu změnu, kterou tento týden otestujete na ostré stránce, včetně stavu před a po. Malé změřené úpravy porazí vágní plány.
Společná slovní zásoba týmu kolem návrhu rozvržení zkracuje kola úprav s designéry a agenturami.
Nástroje, které usnadní vizuální úpravy
Na zlepšení rozvržení a stylu často nepotřebujete vlastní kód. Vizuální editor vám umožní upravit mezery, barvy a písmo a zároveň si prohlédnout náhled na mobilu i na počítači.
WEMASY obsahuje tvůrce webů s vizuálními úpravami, takže změny můžete publikovat, aniž byste kvůli každé drobnosti čekali na vývojáře. Otevřete tvůrce webů, až budete chtít použít, co jste se naučili.
Když zveřejníte úpravy, znovu zkontrolujte rozvržení webu a vizuální vyvážení v designu, aby si modul v hlavě držel pohromadě.
Teď už máte pro návrh rozvržení 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 vizuální vyvážení v designu a zarovnání v designu a udržte v tomto modulu tempo.
Často kladené otázky
Jak dlouho trvá zlepšit návrh rozvržení?
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 návrh rozvržení?
Designér pomůže u složitého rebrandingu, ale řadu oprav kolem návrhu rozvržení zvládnete sami, jakmile víte, na co se dívat. Souvisejícím tématem je rozvržení webu.
Může WEMASY pomoci s návrhem rozvržení 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 návrhu rozvržení?
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 vizuální vyvážení v designu, co zlepšit dál.
Jak souvisí návrh rozvržení 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 návrhu rozvržení?
Pokračujte v této knize kapitolami rozvržení webu a vizuální vyvážení v designu a vybudujte kompletní vizuální systém své značky online.