V úterý pozdě večer znovu otevřete svou úvodní stránku. Titulek je v pořádku, fotky taky, ale návštěvníci přesto odcházejí během pár vteřin. Začnete uvažovat, jestli právě rozvržení webu není to, co jste přehlíželi. Často je. Drobná vizuální rozhodnutí utvářejí první dojem rychleji, než většina podnikatelů čeká.
Mezi typy rozvržení webu patří jeden sloupec, dělené rozvržení, mřížka a časopisecké uspořádání. 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á návrh rozvržení. Projděme si to krok za krokem.
Základní myšlenky kolem rozvržení webu
Mezi typy rozvržení webu patří jeden sloupec, dělené rozvržení, mřížka a časopisecké uspořádání.
Rozvržení volte podle množství obsahu a hlavního úkolu uživatele.
Volba rozvržení webu by měla zůstat jednotná napříč typy stránek.
Jak to uvést do praxe
Jednosloupcové rozvržení použijte pro vyprávění s důrazem na mobil a jednoduché nabídky.
Podívejte se na vizuální vyvážení v designu a zarovnání v designu a propojte toto téma se zbytkem modulu.
Malá, ale stálá zlepšení při učení fungují lépe než občasný celkový redesign.
Praktický seznam, který můžete použít hned dnes
Jednosloupcové rozvržení použijte pro vyprávění s důrazem na mobil a jednoduché nabídky.
Když kontrolujete jakoukoli stránku, ptejte se, zda je rozvržení webu 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 rozvržení webu na vašem webu skutečně zabralo.
Sdílejte tento seznam s každým, kdo váš web upravuje, aby návrh rozvržení zůstal 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. Rozvržení volte podle množství obsahu a hlavního úkolu uživatele.
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 kontrast v designu a porovnejte si poznatky se související kapitolou tohoto modulu.
Rozvržení volte podle množství obsahu a hlavního úkolu uživatele.
Časté otázky, které lidé přehlížejí
Související pojmy jako návrh rozvržení a rozvržení webových stránek vám pomohou najít další příklady a porovnat vaši práci s běžnými standardy.
Volba rozvržení webu by měla zůstat jednotná napříč typy stránek.
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 rozvržení webu 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 vizuální vyvážení v designu a zarovnání v designu, aby si modul v hlavě držel pohromadě.
Teď už máte pro rozvržení webu 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 zarovnání v designu a kontrast v designu a udržte v tomto modulu tempo.
Učit se pracovat s rozvržením webu je postupná dovednost. Vraťte se k této kapitole poté, co nasadíte první zlepšení, aby se myšlenky z čtení proměnily ve zvyk. Malé opakované kontroly porazí nacpání všech pravidel najednou. Poznamenávejte si, co u vašeho publika fungovalo, aby šla další úprava rychleji.
Často kladené otázky
Jak dlouho trvá zlepšit rozvržení webu?
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 rozvržení webu?
Designér pomůže u složitého rebrandingu, ale řadu oprav kolem rozvržení webu zvládnete sami, jakmile víte, na co se dívat. Souvisejícím tématem je vizuální vyvážení v designu.
Může WEMASY pomoci s rozvržením vašeho 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 rozvržení webu?
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 zarovnání v designu, co zlepšit dál.
Jak souvisí rozvržení webu 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 rozvržení webu?
Pokračujte v této knize kapitolami vizuální vyvážení v designu a zarovnání v designu a vybudujte kompletní vizuální systém své značky online.