Zhruba sedm vteřin dává mnoho návštěvníků stránce, než se rozhodnou, zda zůstanou, nebo odejdou. V tomto okně odvede designový systém víc práce než váš prodejní text. Vizuální přehlednost vám vydělá ty vteřiny navíc, které potřebujete k vysvětlení nabídky.
Designový systém shromažďuje komponenty, designové tokeny a pravidla pro tvorbu jednotných rozhraní. 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á manuál značky. Projděme si to krok za krokem.
Co v praxi znamená designový systém
Designový systém shromažďuje komponenty, designové tokeny a pravidla pro tvorbu jednotných rozhraní.
I malé značky těží z drobných systémů pro tlačítka a formuláře.
Z manuálu značky se časem často vyvine plnohodnotnější designový systém.
Jak designový systém uplatnit na webu
Začněte barvou, písmem, mezerami a tlačítky, teprve potom přejděte k pokročilejším vzorům.
Začněte jednou stránkou, třeba úvodní nebo hlavní vstupní stránkou (landing page). Nejdřív opravte největší problém a stejný postup pak přeneste na další šablony.
Tuto kapitolu spojte s kapitolami stylový průvodce značky jako základem a návrh identity značky jako dalším krokem v tomto modulu.
Praktický kontrolní seznam na dnešek
Začněte barvou, písmem, mezerami a tlačítky, teprve potom přejděte k pokročilejším vzorům.
Když kontrolujete jakoukoli stránku, ptejte se, zda je designový systém 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 designového systému na vašem webu skutečně zabralo.
Sdílejte tento seznam s každým, kdo váš web upravuje, aby se manuál značky dodržoval 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. Z manuálu značky se časem často vyvine plnohodnotnější designový systém.
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 návrh identity značky a porovnejte si poznatky se související kapitolou tohoto modulu.
I malé značky těží z drobných systémů pro tlačítka a formuláře.
Časté otázky, které lidé přehlížejí
Související pojmy jako manuál značky a šablona stylového průvodce značky vám pomohou najít další příklady a porovnat vaši práci s běžnými standardy.
Z manuálu značky se časem často vyvine plnohodnotnější designový systém.
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 designového systému 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 stylový průvodce značky a jak zadat práci designérovi, aby si modul v hlavě držel pohromadě.
Teď už máte pro designový systém 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 jak zadat práci designérovi a návrh identity značky a udržte v tomto modulu tempo.
Učit se pracovat s designovým systémem je postupná dovednost. Po první zavedené změně se k této kapitole vraťte, aby se myšlenky z čtení změnily ve zvyk. Malé opakované kontroly porazí snahu nacpat si všechna pravidla najednou. Pište si poznámky, co fungovalo u vašeho publika, a další úprava půjde rychleji.
Často kladené otázky
Jak dlouho trvá zlepšit designový systém?
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 designový systém?
Designér pomůže u složitého rebrandingu, ale řadu oprav kolem designového systému zvládnete sami, jakmile víte, na co se dívat. Souvisejícím tématem je stylový průvodce značky.
Může WEMASY pomoci s designovým systémem 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 designového systému?
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 jak zadat práci designérovi, co zlepšit dál.
Jak souvisí designový systém 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 designovém systému?
Pokračujte v této knize kapitolami stylový průvodce značky a jak zadat práci designérovi a vybudujte kompletní vizuální systém své značky online.