Proč některé značky působí hned důvěryhodně, zatímco jiné vypadají amatérsky, a to i s dobrými produkty? Část odpovědi je barevný kontrast. Nepotřebujete vystudovaný design. Potřebujete jasnou definici a pár praktických kontrol.
Barevný kontrast měří rozdíl ve světlosti mezi textem a pozadím. Tato kapitola vysvětluje, co to znamená jednoduše, proč to ovlivňuje váš web a marketing a jak to použít, aniž byste se ztratili v odborných výrazech. Uvidíte také, jak do stejného obrazu zapadá bílý prostor v designu. Projděme si to krok za krokem.
Základní myšlenky barevného kontrastu
Barevný kontrast měří rozdíl ve světlosti mezi textem a pozadím.
Dostatečný kontrast udrží obsah čitelný pro všechny návštěvníky.
Bílý prostor v designu se s kontrastem doplňuje a snižuje vizuální šum.
Jak to uvést do praxe
Před zveřejněním otestujte hlavní text, odkazy a tlačítka nástrojem na kontrolu kontrastu.
Propojte toto téma se zbytkem modulu. Podívejte se na kapitoly barevná schémata a barevné chyby na webu.
Malá a pravidelná zlepšení porazí občasné kompletní redesigny, zatímco se učíte.
Praktický kontrolní seznam, který můžete použít hned dnes
Před zveřejněním otestujte hlavní text, odkazy a tlačítka nástrojem na kontrolu kontrastu.
Když posuzujete jakoukoli stránku, ptejte se, zda je barevný kontrast viditelný už při prvním posunu na mobilu. Pokud ne, před dolaďováním detailů změňte pořadí sekcí.
Ukládejte si snímky obrazovky před změnami a po nich, abyste poznali, co se u barevného kontrastu na vašem webu skutečně pohnulo.
Sdílejte tento kontrolní seznam s každým, kdo váš web upravuje, aby téma bílého prostoru v designu zůstalo na nových stránkách konzistentní.
Vyberte si na tento měsíc jednu metriku, kterou budete sledovat, třeba čas na stránce nebo počet zahájených formulářů. Úpravy designu pak spojíte s obchodními výsledky, ne jen s vlastním vkusem.
Jak toto téma souvisí s vaší značkou jako celkem
Vizuální rozhodnutí málokdy žijí jen na jedné stránce. Bílý prostor v designu se s kontrastem doplňuje a snižuje vizuální šum.
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, jaká používáte na webu.
Když se vizuální podoba značky rozchází, zákazníci cítí nenápadný nesoulad, i když ho neumějí popsat.
Porovnejte poznatky se související kapitolou v tomto modulu: co je teorie barev.
Dostatečný kontrast udrží obsah čitelný pro všechny návštěvníky.
Časté otázky, které lidé přehlížejí
Vedlejší pojmy jako bílý prostor v designu nebo teorie barev vám pomohou najít hlubší příklady a porovnat vlastní práci s běžnými standardy.
Bílý prostor v designu se s kontrastem doplňuje a snižuje vizuální šum.
Zapište si jednu změnu před a po, kterou tento týden otestujete na živé stránce. Malé měřené úpravy porazí nejasné plány.
Společná slovní zásoba kolem barevného kontrastu, kterou předáte týmu, zkracuje počet kol úprav s návrháři a agenturami.
Nástroje, které usnadní vizuální úpravy
Ke zlepšení mnoha problémů s rozvržením a stylem nepotřebujete vlastní kód. Vizuální editor vám umožní upravit odsazení, barvy i typografii a zároveň si prohlédnout náhled pro mobil i počítač.
WEMASY obsahuje Tvůrce webů s vizuálním editorem, takže změny zveřejníte, aniž byste kvůli každé drobnosti čekali na vývojáře. Až budete chtít využít, co jste se naučili, otevřete Tvůrce webů.
Až zveřejníte úpravy, znovu si projděte kapitoly barevná schémata a barevné chyby na webu. Modul vám tak zůstane propojený.
Teď máte funkční optiku pro barevný kontrast. Využijte ji při kontrole webu, schvalování marketingových materiálů nebo zadání práce návrháři. Pokračujte dalšími kapitolami v tomto modulu: barevné chyby na webu a co je teorie barev. Udržíte si tak tempo.
Učit se barevný kontrast je postupná dovednost. Ke kapitole se vraťte poté, co nasadíte jedno zlepšení, aby se myšlenky změnily z čtení v návyk. Malé opakované kontroly porazí biflování všech pravidel najednou. Poznamenávejte si, co fungovalo u vašeho publika, aby další úprava šla rychleji.
Nejčastější dotazy
Jak dlouho trvá zlepšit se v oblasti barevného kontrastu?
Většina malých firem vidí přehlednější stránky už po několika soustředěných pracovních blocích, jakmile použije základy z této kapitoly. Začněte úvodní stránkou a stejná pravidla pak převeďte na stránky služeb a kontaktů.
Potřebujete návrháře pro práci v oblasti barevného kontrastu?
Návrhář se hodí při složitém rebrandingu, ale mnoho oprav v oblasti barevného kontrastu zvládnete sami, jakmile víte, na co se zaměřit. Související rady najdete v kapitole: barevná schémata.
Může vám WEMASY pomoci použít barevný kontrast na vašem webu?
WEMASY nabízí vizuální editor v Tvůrci webů, takže rozvržení, barvy i typografii upravíte bez kódu. Otevřete Tvůrce webů, upravte šablony a prohlédněte si změny na mobilu.
Jaká je nejčastější chyba v oblasti barevného kontrastu?
Lidé se snaží opravit všechno najednou, místo aby postupovali stránku po stránce. Vyberte si jednu prioritu, třeba čitelnost nebo kontrast, a pak si pro další zlepšení projděte kapitolu: barevné chyby na webu.
Jak souvisí barevný kontrast se SEO?
Přehledná 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í. Pro nejlepší výsledky spojte úpravy designu s dobrou strukturou obsahu.
Čemu se věnovat dál po kapitole o barevném kontrastu?
Pokračujte v této knize dalšími kapitolami: barevná schémata a barevné chyby na webu. Vybudujete si tak kompletní vizuální systém své značky online.