Psychologie barev ve webdesignu, jak vybrat barvu pro tvorbu webových stránek

Barva na webových stránkách je stejně důležitá jako dobrý copywriting, UX nebo typografie. Dobře zvolená paleta pomáhá zaujmout návštěvníka, vyvolat požadované emoce a ovlivnit konverzi. Podle studie Seoul International Color Expo považuje 84,7 % respondentů barvu za jeden z významných faktorů ovlivňujících nákupní rozhodnutí.

V tomto článku si povíme o tom, jak funguje psychologie barev ve webdesignu, a poskytneme tipy na výběr palety pro různé obchodní oblasti.

Základy teorie barev

Abychom pochopili, jak barvy na webových stránkách fungují, obraťme se nejprve k historii. Začíná objevem barevného spektra, které získal Isaac Newton v roce 1880. Tehdy studoval vlastnosti světla a pomocí skleněného hranolu rozkládal bílé světlo na různé barvy – červenou, modrou a žlutou. Takto vznikly primární barvy a jejich kombinací bylo možné získat další nebo, jak se jim také říká, sekundární barvy – zelenou, oranžovou a fialovou. Posun primární a dvou sekundárních barev umožnil získat terciární barvy – modrozelenou, červenooranžovou, žlutozelenou, červenofialovou, žlutooranžovou a modrofialovou.

V důsledku toho bylo objeveno barevné schéma – sada barev, které se k sobě hodí a s jejichž pomocí lze vytvářet harmonické kombinace.

Toto barevné kolo se obvykle dělí na 3 typy:

• Analogový. Kombinace hlavní barvy se sousedními odstíny. Například pokud vezmete žlutou, přidá se k ní žlutozelená a žlutooranžová. Pro modrou to bude modrofialová a modrozelená. Kombinace těchto barev vám umožní vytvořit harmonický design webu, protože v něm budou použity podobné odstíny.

• Komplementární. Zde se používají kontrastní barvy, které jsou umístěny na opačných stranách. Například pro zelenou to bude červená, pro modrou oranžová. Zpravidla je jedna barva dominantní a druhá je doprovodná, která se používá k zvýraznění důležitých prvků, jako jsou tlačítka. Použití doplňkového schématu vám tedy umožní umístit na web akcenty a přitáhnout pozornost návštěvníků.

• Triádický. Toto schéma tvoří trojúhelník s mnoha stranami a používá 3 barvy, jako je zelená, oranžová a fialová. Na webových stránkách to lze použít následujícím způsobem: jedna barva se použije pro pozadí a ostatní se použijí pro obsah a akcenty.

Použití kteréhokoli z výše uvedených schémat vám pomůže vytvořit atraktivní webovou stránku, ale pro dosažení nejlepších výsledků je třeba umět pracovat s vlastnostmi barev. Co je důležité vědět – si rozebereme dále.

Vlastnosti barev

Mezi hlavní vlastnosti barvy patří:

• Jas. Jeden z klíčových parametrů, na kterém mimo jiné závisí úspěch webu. S ním je třeba zacházet opatrně: jasné barvy mohou jak přitahovat pozornost, tak i odradit. Podívejte se například na obrázek níže – vlevo jsou barvy se 100% jasem, vpravo – s 80%. Pozornost na levý sloupec bude nižší, protože takové barvy vyvíjejí velký tlak na oči.

• Nasycení. Další důležitá vlastnost, která je zodpovědná za intenzitu tónu. Pokud snížíte sytost na 0, barva bude matná s šedým odstínem. Po přidání sytosti se obrázek zesvětlí.

Existuje také další důležitý parametr – kontrast. Je zodpovědný za snadnost čtení a umožňuje zvýraznit důležité prvky webu, jako jsou nadpisy. Již jsme se o něm krátce zmínili výše – jedná se o doplňkové barvy, které se nacházejí naproti sobě na barevném kruhu. Jednoduchým příkladem je černá na bílé nebo naopak. Pokud použijete takovou kombinaci barev v textovém obsahu, bude pro uživatele snadné studovat obsah stránky.

Pokud text napíšete například na bílé pozadí ve světle šedé barvě, nebude kontrastní a čitelnost se sníží. Uživatelé se budou muset pozorně dívat a věnovat čas zjištění: „Co je tam napsáno? Jakou informaci nám chtěli sdělit?“

Totéž platí pro všechny ostatní prvky, jako jsou tlačítka: pokud chcete, aby si jich uživatelé všimli, přidejte k nim kontrast. Použijte k tomu doplňkové schéma a vyberte nejvhodnější kombinace. S tím vám může pomoci nástroj od Adobe – stačí zadat hlavní barvu a on k ní vybere kontrastní odstíny. Můžete také použít nejen doplňkové schéma, ale i další: monochromatické, triádové nebo čtvercové.

Další skvělé služby pro výběr palet najdete v našem článku „76 užitečných zdrojů pro designéra“.

Práci ještě více zjednoduší hotové šablony webových stránek od Craftumu, kde si designéři již vybrali barevné schéma, takže se nebudete muset zabývat tím, jak správně rozložit barvy po celé stránce. Stačí vybrat nejvhodnější rozvržení a změnit jeho obsah. A pokud chcete použít jinou paletu, například vytvořenou v Adobe Color, můžete ji do designéra přidat několika kliknutími: stačí přejít do nastavení bloku a změnit barvu prvku.

8 nejlepších barev pro váš web

Výše jsme hovořili o vlastnostech barev a o tom, jak se vytvářejí palety. Nyní se přesuňme k nejzajímavější části – barevným asociacím v designu. Vybrali jsme 8 příkladů, které vám pomohou vybrat nejúspěšnější odstíny pro různé oblasti podnikání. Nechte se inspirovat a poznamenejte si možnosti, které se vám líbí.

Červený

Jasná, okázalá, elegantní, poutavá a stovky dalších přívlastků – to vše se týká červené barvy. Dokáže upoutat pozornost uživatele jako žádný jiný odstín. Vzpomeňte si na značky jako Coca Cola, Ferrari, Cartier, Lego – jejich paleta používá červenou. A nejedná se o spontánní rozhodnutí, protože tato barva evokuje asociace s energií, rychlostí, silou a vášní.

Červená vám pomůže povzbudit uživatele k akci. Buďte ale opatrní: pokud přidáte příliš mnoho červené, může to „řezat“ oko a narušovat vnímání informací. Proto doporučujeme tuto barvu používat pouze v akcentních prvcích projektu, které by měly okamžitě upoutat pozornost.

Například MTS používá svou charakteristickou červenou barvu v tlačítkách, logu a ilustracích.

Nebo tady je další příklad – zde červená hraje také roli akcentové barvy.

Pro jakou niku je červená vhodná:

• potravinová sféra – vyvolává pocit hladu;
• značkové oblečení – přitahuje pozornost;
• dopravní téma – ukazuje „sílu“ zařízení;
• Prodej spodního prádla – představuje vášeň.

Zelený

Tato barva je skvělá pro marketingové webové stránky, které vyjadřují přátelskost, bezpečnost a důvěru. Představte si pole se zelenou trávou nebo les plný čerstvého vzduchu – to jsou stejné pocity, které evokují zelené designy. Zelená je také spojována s relaxací a penězi, takže ji lze často vidět v internetových obchodech prodávajících domácí zboží nebo na finančních webových stránkách. A samozřejmě, pokud potřebujete ukázat úspěch a prosperitu, tato barva vždycky přijde na pomoc.

A další místo v zelených tónech: všimněte si, že je použito pro obrázek na pozadí. Zatímco červené je u tak velkých objektů nejlepší se vyhnout, zelená se v tomto kontextu perfektně hodí. Vůbec „neřeže“ oko, ale naopak uklidňuje.

Pro jakou niku je zelená vhodná:

• finance – vzbuzují důvěru;
• Zdravý životní styl – ukazuje na užitečnost produktů;
• ekologie – spojená s přírodou;
• turistika – vyvolává pocit lehkosti a uvolnění;
• lék – odráží bezpečnost;
• úklid – představuje čistotu.

Modrý

Modrá je další barva, která se nejčastěji vyskytuje v přírodě, například na obloze nebo ve vodě. V psychologii evokuje pocity klidu a důvěry. Proto obchodníci často nosí obleky s touto barvou. Na webových stránkách lze modrou použít k povzbuzení uživatele k důvěře ve vaši společnost. Z tohoto důvodu tuto paletu používá většina online lékáren a klinik. Modrá také vyjadřuje spolehlivost a často se s ní setkáváme ve finančním sektoru a na sociálních sítích, jako je VKontakte nebo Telegram.

Podívejte se, jak veterinární klinika použila modrou barvu ve svém brandbooku:

Nebo zde je další příklad – zde je modrá použita také jako akcentová barva:

Pro jakou niku je modrá vhodná:

• finanční a platební systémy – vzbuzuje důvěru;
• věda – vyjadřuje sebevědomí;
• sociální sítě jsou o komunikaci, důvěře a upřímnosti;
• kosmetika – představuje péči o sebe;
• medicína a úklid – spojené se spolehlivostí a čistotou.

Žluť

Žlutá, stejně jako modrá, je primárně spojována s přírodou – je to slunce, teplo, jemné a příjemné světlo. Proto je tato barva ideální, pokud chcete ilustrovat pozitivitu, nabít se energií nebo jednoduše vytvořit pocit pohodlí. Můžete například vytvořit internetový obchod s produkty pro domácí mazlíčky se žlutými odstíny, které vyvolají pozitivní emoce, což je to, co by web měl dělat pro své publikum.

Další příklad použití žluté barvy lze vidět na webových stránkách fitness klubu. Mnoho lidí se těžko odhodlá jít do posilovny a díky této barvě se objevuje sebevědomí a energie.

Pro jakou niku je žlutá vhodná:

• zboží pro děti – evokuje radost, asociace se zábavou a hrami;
• logistika a taxi – představuje rychlost;
• rychlé občerstvení – navozuje chuť k jídlu a naznačuje rychlost přípravy;
• podnikání, které odráží energii a dynamiku.

Když se mluví o něčem „temném“ a ponurém, asociace, které se vybaví, nejsou nejlepší. V designu takové odstíny dodávají eleganci a vážnost. Pokud se podíváte na černou šatní skříň nebo interiérové předměty, s největší pravděpodobností budou prodchnuty minimalismem a elegancí. Webové stránky jsou také podobné. Černá zpravidla pomáhá vytvářet kontrast a image prémiové značky. Můžete například vytvořit barevnou paletu černé a zářivě tyrkysové, která zdůrazní to, co je důležité.

Černá sama o sobě může také fungovat jako akcentová barva. Tohoto efektu lze snadno dosáhnout se světlým pozadím:

Pro jakou niku je černá vhodná:

• prémiové zboží a kosmetický průmysl – hovoří o exkluzivitě;
• IT – ukazuje na modernost společnosti;
• finance – odráží spolehlivost;
• prodej aut nebo alkoholu – představuje kvalitu a prémii.

Fialový

Fialová barva představuje bohatství a moc – tento význam nabyla dlouho před příchodem webových stránek a designu obecně. Kolem roku 1200 př. n. l. bylo fialové barvivo velmi vzácné a drahé – mohli ho používat jen vyvolení. Dnes můžeme fialovou barvu vidět na webových stránkách s luxusními produkty. Také ulevuje od stresu a vytváří pocit lehkosti, proto se často vyskytuje v lékařství. Fialová se navíc často používá v IT k vyjádření kvality a modernity.

Příklad webových stránek pro vývojovou platformu s použitím Purple:

Takto internetový obchod last.wear použil fialovou na svých webových stránkách – použil pouze akcenty, což mu umožnilo vyjádřit luxus a eleganci této barvy.

Pro jakou niku je fialová vhodná:

• lék – způsobuje pocit klidu;
• IT – označuje modernost a kvalitu produktu;
• značkové oblečení a kreativní projekty – spojené s módou a kreativitou;
• potravinářské výrobky – uvolňuje a vytváří touhu po nákupu potravinářských výrobků.

Pomerančový

Další barvou, kterou lze často nalézt na webových stránkách a designových produktech, je oranžová. Je jasná, ale ne tak „křiklavá“ jako červená, ale vyváženější. V psychologii označuje kreativní myšlení, svobodu, pozitivitu a sebevědomí. Často je spojována s citrusovými plody a zlatým podzimem. Vynikajícím příkladem použití oranžové je produkt Coca-Coly – Fanta.

Na webových stránkách lze oranžovou barvu použít k demonstraci kreativity, ukázce technologických možností společnosti nebo k dekoraci internetového obchodu s dětským zbožím. Skvěle se hodí i do projektů prodeje nemovitostí, kde je důležité projevit pohodlí a teplo.

Zde je například ukázka, jak byla oranžová použita v kreativním projektu pro targetologa. Zde byla použita jako akcentová barva a černá dodala webu „drahý“ a prémiový vzhled.

A v tomto příkladu oranžová dodala jasné emoce, přátelskost a jednoduchost, což je přesně to, co je pro kurzy cizích jazyků potřeba.

Pro jakou niku je oranžová vhodná:

• potravinářské výrobky – zprostředkovává jas chutí;
• IT – hovoří o technologických možnostech společnosti;
• nemovitosti – představují pohodlí;
• zábava a dětské produkty – přináší radost.

Růžový

Pokud hodnotíme web z hlediska psychologie, pak růžová barva naznačuje, že byl vytvořen s láskou ke svému produktu a značce. Obvykle se používá v projektech s převážně ženským publikem. Pro použití růžové jako takové však neexistují žádná omezení. Lze ji použít bez ohledu na pohlaví. Skvělým příkladem je platforma vc.ru. Tam se barva romantiky používá jako akcenty: v záhlaví, ikonách a bannerech.

Pokud chcete ukázat něco roztomilého a něžného, růžová se také bude hodit. Najdete ji například v internetovém obchodě s ručně vyráběnými výrobky:

Také sami používáme růžovou. Na našich webových stránkách ji používáme jako akcenty.

Pro jakou niku je růžová vhodná:

• obchod s dětským zbožím – vyvolává náklonnost;
• online služby a blog – vytvářejí pocit pohodlí a demonstrují jednoduchost produktu;
• sladkosti – spojené s dětstvím, „dobrotami“ a radostí;
• oblečení, obuv a kosmetické produkty – ztělesňují ženskost a něhu.

Závěr

Jaká barva se hodí k mé značce? Tato otázka se týká všech majitelů firem, zejména těch, kteří s podnikáním teprve začínají. Při výběru palety se snažte spolehnout jak na význam barvy, tak na sdělení, které vaše společnost sděluje. Například na webových stránkách mateřské školy bude zářivě žlutá evokovat vřelé a radostné emoce, ale na webových stránkách lékařské kliniky může vypadat nevhodně. Někdy se pravidla porušují: například červená dokáže nejen vyjádřit vášeň, ale také jednoduše umístit akcenty na správná místa. U toho všeho byste si měli dávat pozor i na konkurenci: pokud si některý z nich barvu „zafixoval“, můžete si vybrat jinou paletu a odlišit se od ostatních.

Jakmile si vyberete barvu, která odpovídá vašemu oboru, můžete přejít k tvorbě webových stránek. S Craftum to můžete udělat za pouhých 159 rublů měsíčně. Zaregistrujte se a vytvářejte jedinečné projekty!