Ako používať farby vo webdizajne?
Trendy pre rok 2018

Publikoval Igor Fedorko 22. marec 2018

Farba je jedným zo základných a najviac užitočných nástrojov pre každého webdizajnéra. Farba môže upútať pozornosť návštevníka web stránky, ovplyvniť jeho emócie, vnímanie a v neposlednom rade aj jeho správanie na webe.

V tomto článku si povieme o tom, ako sú pre dizajn web stránky farby dôležité, akým spôsobom je možné ich kombinovať, aby čo najlepšie vystihli charakter webu a pozrieme sa na konkrétne nástroje, ktoré Vám pri tvorbe a návrhu webstránky pomôžu s ich výberom.

Najprv sa pozrime na definície teórie farieb

Teória farieb pokrýva komplexné množstvo vecí, ale na najzákladnejšej úrovni ju môžeme definovať ako interakciu medzi farbami a dizajnom web stránky prostredníctvom troch prvkov: komplementácie, kontrastu a pestrofarebnosti. O týchto troch prvkoch, ktorými môžeme farby na webe definovať si povieme viac nižšie.

Farba je základným dizajnovým prvkom, ktorý vidíme všade navôkol seba vo svojom živote a taktiež aj na každej webovej stránke, ktorú sa rozhodneme navštíviť. Farby rovnako tak vnímame aj pri dennom používaní našich obľúbených mobilných aplikáciach. V súčasnosti sa webdizajnéri neboja používať farby viac odvážne ako tomu bolo v minulosti. Farby často používame na to, aby sme určitému prvku na webe venovali väčšiu pozornosť, psychologicky prostredníctvom farby ovplyvňovali návštevníka k určitej akcii a inokedy aj keď chceme sprostredkovať lepšiu skúsenosť so značkou.

Komplementárne farby

Komplementácia hovorí o spôsobe, akým farby vnímame a vidíme z hľadiska ich vzťahov s inými farbami. Ak jednotlivé farby zaberajú opačné konce farebného spekra, vedú ľudí k tomu, že dizajn webstránky vnímajú ako vizuálne príťažlivý a vytvoria tak prostredie, v ktorom sa ľudské oko cíti príjemne. Existujú dva prístupy k použitiu tejto techniky: "trojičné" farebné schémy a "zlúčené" farebné schémy.

Na uvedenom screenshote zo stránky výrobcu topánok VANS máte možnosť vidieť pekný príklad práce s farbami a ich komplemenárnymi vlastnosťami.

Kontrast

Kontrast znižuje namáhanie očí a fokusuje pozornosť návštevníkov webstránky tým, že jasne rozlišuje elementy na webe. Najčastejším príkladom kontrastu je efektívny výber farby pozadia a textu. Ak niekedy máte o kontraste pochybnosti, najjednoduchší spôsob pre dosiahnutie dobrého výsledku je použiť čo najviac svetlé pozadie a tmavú farbu pre text. Toto je jedna zo základných oblastí teórie farieb, ktorá je pre použiteľnosť webstránky rozhodujúca.

Okrem textu je možné prostredníctvom kontrastu upozorniť diváka aj na konkrétne prvky webstránky. Ak chcete upriamiť pozornosť na určitú oblasť webstránky, použijete rôzne kontrastné farby a týmto spôsobom môžete upriamiť pozoronosť na konkrétne prvky webu.

Na stránkach portálu Washington Post vidíme jednoduchú a účelnú prácu s kontrastom. Platí tu tzv. čierne na bielom.

Pestrofarebnosť

Pestrofarebnosť či tzv. živosť farieb diktujú emócie vášho dizajnu. Jasnejšie farby vedú užívateľa webstránky k tomu, že sa cíti viac energický, čo je obzvlášť účinné, keď sa snažíte propagovať produkt alebo vyvolávať určitú emocionálnu reakciu. Naopak tmavšie odtiene farieb návštvníka webstránky uvoľnia a umožnia mu zamerať svoju pozornosť na iné prvky.

Tmavé farby na web stránkach NETFLIXu upozorňujú na iný obsah - filmové plagáty.

Aké sú súčasné trendy v používaní farieb?

Leo Widrich na svojom blogu rieši otázku, prečo Facebook používa modrú farbu. Okrem toho, že sa dozvieme, že Mark Zuckerberg je do istej miery farboslepý a modrú farbu vníma najlepšie je isté to, že človek má vizuálny zmysel rozvinutý do najväčšej miery. Na 90% hodnotíme produkt iba na základe jeho farby. Preto je logické ako dôsledok brať do úvahy to, že pokiaľ riešime dizajn webových stránok, farba hraje jednu z najdôležitejších úloh.

V súčasnosti z pozadia vystupujú žiarivé farby, ktoré doslova pulzujú energiou. Tak ako sme si už povedali, dizajnéri používajú pestrofarebné farby na to, aby jednak upriamili pozornosť ľudí na dôležité prvy na webe a pôsobili energicky.

Web stránka hudobnej služby Spotify používa na svojom webe veľmi živé farby, čo je v súčasnosti veľkým trendom.

Značka NIKE na svojej stránke promuje produkty pomocou živých farieb.

Ako vytvoriť farebnú schému?

Pozrime sa na niektoré zo všeobecne zaužívaných prístupov k tvorbe kvalitných farebných schém.

Trojičné farebné schémy

Skladajú sa z troch farieb, ktoré sa nachádzaju na opačných koncoch farebného spektra. Existuje veľmi jednoduchý spôsob, ako takúto farebnú schému vytvoriť:

Zlúčená alebo komplementárna farebná schéma

Takáto schéma je založená na použití farieb nasledovným spôsobom: z opačných koncov farebného spektra vyberiete a použite dve farby.

Analógová farebná schéma

Analógový výber farieb je založený na starostlivom výbere farieb, ktoré sa nachádzajú v rovnakej oblasti farebného spektra. Často sa tieto farby odlišujú svojou živosťou a kontrastom.

Užitočné nástroje pre vytváranie farebných schém

Perfektným nástrojom pre vytváranie zmysluplných farebných schém pre webstránky je služba Coolors. Farebnú schému pre Váš webdizajn si môžete vygenerovať alebo si prehliadať už existujúce farebné schémy a vybrať si tak už overené farebné schémy.

Ak sa rozhodnete si farebnú schému vytvoriť, ako základnú farbu môžete použiť napr. jednu alebo viacero farieb z vášho brandu. Vyberiete farby z logotypu a na základe nich vygenerujete ďalšie, ktoré môžete na svojom webe použiť. Farby v schéme si môžete uzamknúť a ostatné generovať stále nanovo až kým nenájdete Vašu ideálnu kombináciu. To aký príncíp zostavovania farebnej schémy použijete, je už len na vás.

Čo si z tohoto článku odniesť

Zapamätajte si, že výber farieb z opačného farebného spektra vytvára pre ľudské oko vizuálnu harmóniu. Vysoký kontrast umožňuje ľahko čítať text a navádzať pozornosť užívateľa želaným smerom na webe. Pri vytváraní farebných schém si pomôžte užitočnými nástrojmi ako je napr. coolors.co.

Autorom blogu je Igor Fedorko
UX/UI dizajnér v internetovej spoločnosti Smash a odborný asistent na Fakulte manažmentu na Prešovskej Univerzite