Barva ve webdesignu: jak v uživateli vyvolat ty správné emoce

2024 Autor: Malcolm Clapton | [email protected]. Naposledy změněno: 2023-12-17 03:50

Barva určuje emocionální reakci uživatele na web, i když si toho sám není vědom. Jaké barvy použít pro pozadí a různé prvky webu, aby vyvolaly určité vjemy, a jak správně kombinovat barvy ve webovém designu, čtěte níže.

V celé historii lidstva byli mistři malíři všeobecně uznáváni pro svou schopnost pracovat s barvami. V moderním světě jsou stejně uznáváni specialisté, kteří vědí, jak kombinovat barvy pro komerční a obchodní účely - v reklamě a webdesignu.

Schopnost používat barvy lze čerpat donekonečna. To je skutečná propast možností, jak člověka ovlivnit.

Probereme základy teorie barev a barevné schéma a poté si povíme o emocionálním dopadu určitých barev.

Teorie barev

Tématu barev může být věnována celá kniha, takže ji nebudeme brát celou, ale omezíme se pouze na užitečné informace, které lze použít při vývoji návrhu rozhraní.

Teorii barev lze rozdělit do tří částí:

Kontrast

Každý odstín má protiklad, abych tak řekl, svou "nemesis", která tvoří největší kontrast k této barvě. K nalezení takové barvy můžete použít barevné kolečko. Stačí vybrat barvu na opačné straně kruhu.

Přidání

Tyto barvy nejsou vždy v rozporu. Doplňkové barvy se navzájem zdůrazňují, na rozdíl od kontrastních. V barevném kole na sebe tyto barvy navazují, např. doplňkové barvy lila – modrá a růžová.

Rezonance

Každá barva navozuje určitou náladu. Světlé teplé barvy (červená, oranžová, žlutá) naplňují člověka energií, probouzejí ho a studené tmavé odstíny (zelená, modrá, fialová) naopak uvolňují a uklidňují.

Například používají červenou navigační lištu k probuzení čtenáře a zvýšení jeho vzrušení. S ohledem na specifičnost webu - senzační zprávy - červená vypadá jako logické rozhodnutí.

Teorie barev ve webovém designu je víc než jen dekorace. Barva může změnit vnímání vašeho webu a hrát klíčovou roli ve vašem podnikání.

Emocionální vnímání barev

Těsnou souhru barev a emocí nikdo nepopře. A samozřejmě každý webový designér chce tento vliv využít k vytvoření správné atmosféry pro každý web.

Na základě několika studií – analýzy zveřejněné na webu a příspěvku o barvách v – vysvětlíme, jak barvy ovlivňují emoce a pomůžeme vytvořit UX design.

Je důležité si uvědomit, že různé kultury po celém světě vnímají barvy odlišně. Popíšeme emocionální asociace, které jsou jedinečné pro západní kulturu.

Červené

Nejvíce stimulující barva, tak energeticky nabitá, že může dokonce zvýšit krevní tlak. Červená představuje vášeň a sílu a je barvou, která nejvíce přitahuje pozornost, a proto se často používá pro důležitá varování a oznámení.

Například červená barva je velmi vhodná pro stránky, jejichž účelem je varovat před vnímanými hrozbami.

Použití hodně červené v horní části stránky je skvělé, protože upozorňuje na důležité informace ve vaší zprávě. Zároveň mají lidé tendenci rychle opustit červenou „nebezpečnou zónu“a posouvat se dolů. A to vám zase umožňuje ukázat uživateli více obsahu.

Ale tato barva může působit i proti vám, protože může způsobit agresivitu nebo přílišnou stimulaci. Pokud chcete navodit uvolněnější atmosféru, zkuste červenou používat s mírou a volte světlejší odstíny červené.

oranžový

Jako nejklidnější z teplých tónů je oranžová schopna vyvolat řadu různých emocí. Jako primární barva může vzbudit zájem a povzbudit a jako sekundární barva si tyto vlastnosti může zachovat, ale nenápadnějším způsobem.

Oranžová navíc pomáhá vytvářet pocit pohybu a energie. Skvěle to vypadá například na firemním animovaném webu, který připomíná mládí a pohyb. Barva je spojena s kreativitou a zároveň si zachovává důvěrně známý pocit ze značky.

Žlutá

Je to jedna z nejuniverzálnějších barev a emoce, které vyvolává, jsou více závislé na odstínu.

Jasně žlutá dodává energii, ale bez ostrosti a ostrosti, která je přítomna v červené. Střední odstíny žluté navozují pocit pohodlí a zároveň povzbuzují. Tmavé odstíny (včetně zlaté) poskytují pocit starověku, naplňují prostor nadčasovostí, moudrostí a zvědavostí.

Například na domovské stránce webdesignové agentury vyzařují tmavší tóny žluté energie, zvědavosti a autority. Tato barva je skvělá pro společnosti, které vydělávají na poradenství a chtějí zdůraznit svou profesionalitu.

Zelená barva

Zelená je mostem mezi teplými a studenými odstíny, i když bývá spíše studená. To znamená, že zelená má relaxační účinek jako modrá, ale má také trochu energie ze žluté.

Díky tomu vytváří velmi vyváženou a stabilní atmosféru. Tmavší odstíny zelené budí dojem bohatství a hojnosti, stejně jako webové stránky.

Modrá barva

Stejně jako u žluté je efekt modré velmi závislý na odstínu. Všechny odstíny modré jsou univerzální z hlediska relaxace a bezpečnosti, ale světlé tóny jsou spojeny s přívětivostí a tmavé tóny se smutkem.

Sociální sítě jako Twitter a Facebook používají světlejší až střední odstíny modré, zatímco firemní stránky preferují tmavší odstíny síly a spolehlivosti.

Skvělým příkladem je eventová agentura. Pomocí modrých květů jako pozadí vizuálně naznačili své znalosti a dovednosti ve floristice a také vytvořili pocit spolehlivosti a důvěry.

To je velmi důležité, protože pracují s událostmi, kde je vizuál velmi důležitý, jako jsou svatby.

Nachový

Fialová barva je historicky spojena s královskou majestátností a naznačuje luxus. Odstíny fialové odrážejí štědrost a bohatství obecně, což z nich dělá skvělou volbu pro módu a luxusní zboží (dokonce i čokoládové, jako je výběr barev značky).

Světlejší odstíny jako levandule (fialová s růžovým nádechem) evokují myšlenky na romantiku, zatímco tmavší odstíny působí více šik a tajemně.

Černá

Nejsilnější z neutrálních barev, černá, se objevuje téměř na každém webu. Může vyvolat různé asociace v závislosti na barvách, které ji doprovázejí, nebo jim dominovat, pokud je používána nadměrně.

Síla a neutralita černé z ní dělá skvělou volbu pro velké bloky textu, ale jako primární barva může vyvolat pocit nervozity nebo být dokonce spojována se zlem.

U většiny webů se černá používá k vytvoření pocitu sofistikovanosti. Kombinace černé a bílé v minimalistickém designu působí dojmem elegance a stylu, stejně jako na stránkách BOSE.

Bílý

V západní kultuře je bílá spojována s čistotou, laskavostí a nevinností. Tato barva se často používá pro pozadí minimalistických a jednoduchých webových stránek.

Navíc žádná jednotlivá barva vám nedovolí věnovat tolik pozornosti ostatním barvám jako bílá. Například pro vítěze Awwwards Kloina Tosheva jsou všechna jeho díla rozložena na bílém pozadí, čímž pouze vyniknou ilustrace a působí dojmem elegantní galerie.

Šedá barva

Navzdory skutečnosti, že v některých situacích může šedá vytvořit ponurou a smutnou atmosféru, je stále často používána profesionálními designéry.

Je to všechno o odstínech: jejich střídáním můžete získat všechny emoce způsobené jak černou, tak bílou. Celkově vzato je šedá mocným nástrojem ve správných rukou.

A v kombinaci s jasnějšími barvami v designu působí šedé pozadí moderně a ne například ponuře.

Béžový

Béžová sama o sobě je spíše nudná a nevýrazná, ale má jednu pozoruhodnou vlastnost: béžová přebírá charakter květin, které ji obklopují. Pokud tedy není určena k vyjádření zdrženlivosti, béžová slouží jako pozadí nebo druhá barva.

Tmavší odstíny béžové vytvářejí pocit tradice a zemitosti, dodávají papírový pocit, zatímco světlejší odstíny působí svěžeji a moderněji.

Například na webových stránkách restaurace vytváří světle béžová barva kolem názvu a tmavší okraje dojem, že restaurace je svěžím pojetím tradiční kuchyně.

Slonová kost

Slonová kost stejně jako krémová vyvolávají téměř stejné emoce jako bílá. Slonovina je však teplejší (nebo méně sterilní) než bílá, což vytváří větší pocit pohodlí při zachování minimalismu.

Místo bílé můžete použít slonovinu, abyste zjemnili kontrast mezi ní a tmavšími barvami. Například na místě jsou hnědo-oranžové prvky umístěny na slonovinovém pozadí (které vypadá našedlé), aby se zachoval pocit tepla.

Barevné spektrum

Každý web má barevné schéma, které využívá primární barvy k vyplnění většího prostoru. Jak jsme již řekli, použití těchto barev ovlivňuje mysl a náladu člověka především podvědomě. Vybírejte je tedy pečlivě.

I když existuje mnoho způsobů, jak barvy kombinovat, my se zaměříme na tři nejúspěšnější a běžně používané.

Triáda (trojnásobná harmonie, trojúhelník)

Triáda je základní a nejvyváženější systém tří barev. Využívá rezonance a barevného doplňku, ale nemá komplexní kontrast, což z triády činí nejspolehlivější gamut.

Na 12barevném kolečku vyberte libovolné tři o 120 stupňů od sebe: jeden pro popředí a dva pro obsah a navigační panel.

Duální komplementární systém

Tato řada je obtížněji implementovatelná, ale může být ziskovým řešením. Jsou použity čtyři barvy: dvě kontrastní a dvě doplňkové.

Podívejte se, jak na základě tohoto rozvržení vypadá skvělá stránka Florida Flourish. Červené a zelené barvy kontrastují v rostlinách a textových blocích, zatímco modré pozadí a oranžová poušť efektně doplňují obraz.

Analogy (sériový systém)

Škála podobných barev využívá především doplňkové odstíny. To vám umožní zvláště jasně zdůraznit některé vlastnosti a vyvolat určité emoce.

Například kombinace červené, oranžové a žluté barvy zdůrazňuje energii a vitalitu. Použití takových stupnic je velmi jednoduché, ale je obtížné vybrat, které barvy budou zahrnuty do kombinace. Jejich účinek bude přehnaný, takže se nemůžete mýlit.

Například použití modré, tyrkysové a zelené barvy v designu webu vytvořilo atmosféru klidu a vyrovnanosti. Všimněte si, jak byla žlutá použita ke zvýraznění důležitých bodů.

Toto jsou jen základy teorie barev, které vám mohou pomoci vytvořit působivé vlastní návrhy, a neexistuje žádné omezení toho, jak daleko můžete zajít, pokud jde o barvy na vašem webu.

Pomocné nástroje pro výběr barvy

Naštěstí je k dispozici několik nástrojů, které vám pomohou uvést teorii barev do praxe. Vyzkoušejte tyto palety, abyste nemuseli začínat od začátku, abyste si vytvořili vlastní:

1. dříve známý jako Adobe Kuler. Je to jeden z nejspolehlivějších nástrojů pro výběr barev.
2. … Pokud chcete jednoduchý nástroj pro co nejrychlejší výběr barvy, Paletton je skvělý.
3. … Skvělý nástroj pro výběr barvy uživatelského rozhraní.

A pokud vám tyto nástroje nefungují, zde jsou různé nástroje pro výběr barvy.

Přímý vztah mezi barvou a emocemi

Pamatujte: uživatelé si málokdy všimnou a ocení barvu pozadí, navigační lišty, jednotlivých detailů, ale to neznamená, že je barva neovlivňuje. Děje se to jen podvědomě.

Uživatel má nějaké emoce, vytváří si vztah ke stránce nebo značce, provádí určité akce: roluje dolů, kliká na tlačítka, která navozují akci, nebo je naopak nevnímá. A barva v tom všem hraje obrovskou roli.

Pokud máte nějaké tipy na použití barev ve webdesignu, podělte se prosím v komentářích.