NoIdentity

NoIdentity

Teória farieb a webový dizajn

Napísala Scarlett

Ako dosiahnuť, aby bola vaša stránka vizuálne pútavá? Premysleným a cieľavedomým dizajnom.

Takmer nič nie je v dizajne dôležitejšie ako farby. Správna kombinácia farieb môže výrazne ovplyvniť aktivitu na vašej stránke a rozhodnúť o tom, koľko času tam návštevník strávi. (A či sa ešte niekedy vráti.) Iste, môžete skrátka použiť rovnakú farebnú paletu, akú ste videli na väčšine weboch, veď boli celkom fajn, poviete si. Budete však riskovať, že sa stratíte v širokom pásme priemernosti. A nik si predsa nepamätá to, čo je priemerné, v pamäti nám zostáva najmä originalita. Ak sa však naučíte zopár pravidiel teórie farieb, jednoducho zvládnete základy webového dizajnu a odhalíte úplne nový svet možností a inšpirácií.

Tri základné farby

Určite ste už počuli o základných, tzv. primárnych farbách, ktorých kombináciou dokážeme dostať ostatné, tzv. sekundárne farby. Existuje niekoľko modelov farieb, no medzi najznámejšie a najvyužívanejšie patria RGB, CMYK a RYB modely, ktoré pracujú s troma primárnymi farbami. Každý z týchto modelov považuje za základné odlišné farby, pričom jednotlivé písmená prislúchajú konkrétnym farbám: RGB – červená, zelená, modrá;  CMYK – zelenomodrá (azúrová), purpurová, žltá, čierna (respr. kľúčová farba); RYB – červená, žltá, modrá.

RGB aditívny model fariebrgb-model

RGB model je aditívny. Je založený na teórii trichromatického videnia farieb u človeka. Funguje na princípe zmiešavania svetelných odtieňov, ktoré je ľudské oko schopné vnímať. Jednotlivé hodnoty vlnových dĺžok svetelného spektra interpretujeme ako farby. Farby viditeľného spektra elektromagnetického žiarenia sú fialová, modrá, zelená, žltá, oranžová a červená. V prípade RGB modelu ide o zmiešanie červeného, zeleného a modrého svetla, pričom spojením všetkých troch farieb vzniká biela. Tento model sa využíva v informačných technológiách, konkrétne pri zariadeniach, ktoré nám majú sprostredkovať nejaký obraz (televízia, monitory, fotoaparáty). Cieľom RGB modelu je presvetliť plochu tienidla s výsledkom rôznofarebnej prezentácie obrazu.

viditelne-svetelne-spekrtum

Viditeľné spektrum elektromagnetického poľa

 CMYK substraktívny model farieb

cmyk-model

Opakom je substraktívny CMYK model, ktorý sa využíva pri tlači. V tomto prípade je povrch materiálu, na ktorom sa má obraz premietať (resp. odrážať svetlo) zvyčajne biely. Princíp skladania farieb musí byť preto opozitom modelu GRB. Základnými farbami CMYK modelu sú azúrová (cyan), purpurová (magenta) a žltá (yellow). Ich zmiešaním dostanete výrazne saturovanú tmavú farbu, nie však úplne čiernu. Základné farby CMYK modelu sú komplementárnymi (doplnkovými) farbami RGB modelu. Azúrová je komplementom červenej, purpurová zelenej a žltá zase modrej.

Vzťah komplementárnych farieb sa dá najlepšie vyjadriť nakreslením farebného kruhu. V ňom tieto farby ležia vždy oproti sebe a ich zmiešaním dostanete tzv. neutrálnu farbu (rôzne odtiene šedej farby).

Ako to súvisí s webovým dizajnom?

Teória je väčšinou nudná, viem. Hlavne, keď súvisí s fyzikou alebo čímkoľvek, čomu ste sa v škole snažili vyhnúť. Pravda je však taká, že mnohé z toho, čo patrí medzi povinné učivo je v skutočnosti veľmi zaujímavé. Stačí sa na to pozrieť z inej perspektívy – žiadny dizajnér sa nezaobíde bez toho, aby aspoň trochu rozumel teórii farieb. Fyzika, matematika a umenie majú k sebe omnoho bližšie, ako by ste si mysleli.

Vedieť ako funguje RGB a CMYK model vám padne vhod najmä vtedy, ak budete chcieť nejaký zo svojich dizajnov vytlačiť. Predstavte si, že máte na stránke skvelé logo, ktoré by ste chceli mať vytlačené na rôznych prezentačných materiáloch. Veľmi ľahko by ste narazili na problém rozdielnosti farieb, ak by ste ich pred vytlačením neoptimalizovali podľa CMYK modelu. Nehovorím o maličkých detailoch. Hovorím o neónovo zelenej, z ktorej sa stane hnedavá bažina. To už je poriadny rozdiel. Najmä vtedy, ak vezmeme do úvahy komunikačnú silu farieb.

Článok o tom, ako farby optimalizovať a aké voľne dostupné nástroje môžete pri tom využiť už pripravujeme.

Teraz sa konečne môžeme dostať k tomu podstatnému: farebnému kolesu a RYB modelu. Sľubujem, že odtiaľto to už začne byť naozaj zaujímavé a menej teoretické.

Farebné koleso a RYB model farieb

Farebné koleso je skvelá vizuálna pomôcka, ktorá vám umožní lepšie pochopiť, aké sú vzťahy medzi jednotlivými farbami a ako spolu farby komunikujú. Farebné koleso, ktoré budeme používať vychádza z RYB modelu. Tento model sa označuje za východiskový vo výtvarnom umení. Primárne farby tohto modelu sú červená (red), žltá (yellow) a modrá (blue). Tie sa ďalej kombinujú a tvoria tak paletu 12 základných farieb. Potom je to už len hra so svetlom (odtieňmi), ktorá nám poskytuje väčšiu farebnú škálu a teda aj viac dizajnových možností.

Miešaním troch základných farieb RYB modelu vzniknú 3 tzv. sekundárne farby: fialová, zelená a oranžová. Zmiešaním primárnych a sekundárnych farieb vznikne 6 ďalších, tzv. terciárnych farieb: fialovo-modrá, modro-zelená, zeleno-žltá, žlto-oranžová, oranžovo-červená a červeno-fialová. Dokopy máme teda 12 farieb. Na prvý pohľad sa to nemusí zdať veľa. No aj bez toho, aby sme tieto farby zosvetľovali alebo stmavovali (uberali alebo im pridávali saturáciu), dostaneme veľké množstvo možných kombinácií. A práve kombinovanie – správne kombinovanie – farieb je vo webovom dizajne tou najpodstatnejšou úlohou.

ryb-farebne-koleso

Ako vzniká farebné koleso

Farby a farebná harmónia

Trafiť tú správnu farebnú kombináciu môže byť niekedy nepredstaviteľne náročné. O to komplikovanejšie to začne byť, ak chcete použiť ako viac ako len dve farby. V zásade platí, že to spraviť môžete. Skúste sa však vyhnúť použitiu 4 alebo viacerých farieb. Tohto pravidla by ste sa mali držať najmä v prípade, ak vám ide o vytvorenie vizuálne pútavého a čistého dizajnu.

Ľudskému mozgu sa páči to, čo je jednoduché, čo dokáže rýchlo spracovať a nad čím nemusí dlho uvažovať. Webové stránky si v prvom rade prezeráme, nečítame a neanalyzujeme ich. Rozhodnutie o tom, či sa nám nejaká stránka páči alebo nie, spraví náš mozog omnoho rýchlejšie, ako si to stihneme uvedomiť. Preto je dobré držať sa zlatého pravidla minimalizmu.

Dôležitý nie len počet farieb, ale tiež pomer ich použitia. Dobrým tipom pri práci s trojfarebnou schémou je pravidlo “60-30-10”. Dominantná farba tvorí 60%, sekundárna 30% a terciárna 10% z celkového pomeru. Terciárna farba by mala byť výrazná a oslovujúca (v angl. accent colour). Mala by byť pútačom vašej pozornosti, pričom ostatné dve farby by mali vytvárať akési harmonické pozadie. Dobrým príkladom sú tieto dva WordPress templaty z Creative Marketu.

60-30-10-pravidlo

JohnSmith by Viktor

accent-colour

Dream by Nilanjan Banerjee

Spomínané pravidlo môžete aplikovať aj na štvorfarebnú schému. Stačí, ak trochu upravíte pomery na: 60% dominantná farba, 15% a 15% sekundárne farby, 10% terciárna farba. Uberať môžete aj z dominantnej farby, no v žiadnom prípade nie z terciárnej. Ak by ste to spravili, mohla by sa celkom stratiť, a teda minúť svojmu cieľu.

Tipy, ako dosiahnuť harmonický dizajn

Vytvoriť dizajn, ktorý je ľudskému oku lahodiaci spravidla nie je jednoduché. Dôvodom je, že sa nemôžete spoliehať výlučne na vedecké štúdie a teórie o tom, ako funguje náš mozog. Prvým problémovým faktorom je vlastný vkus človeka. Všetci vieme, ako nám naša individualita dokáže v niektorých prípadoch skomplikovať komunikáciu. Druhým problémom môže byť cit pre farby, ktorý buď máte alebo si ho musíte vybudovať. To môže trvať pár týždňov, ale aj niekoľko rokov. Dôležité je voliť farby tak, aby zodpovedali obsahu a zámeru projektu, na ktorom pracujete.

Nevešajte však hlavu, stále je tu niekoľko pomôcok a tipov, ktorých sa môžete pridržiavať. Ak je vám jasná téma a pohrebné auto si nepredstavujete ružové, nemali by ste toho veľa pokaziť. Skúste sa riadiť týmito pravidlami:

1. používajte monochromatické farby

Vyberte si dominantnú farbu a kombinujte ju s jej odtieňmi. Ak potrebujete jednoduchú vizitku vašej firmy alebo prezentujete seriózny projekt, rozhodne choďte touto cestou. Zaručene nič nepokazíte, nečakajte však žiadny “waw efekt”.

monochromaticke-farby
2. …alebo analogické farby

Ide o farby, ktoré sa vo farebnom kolese nachádzajú vedľa seba. Týmto spôsobom dokážete dosiahnuť podobný efekt ako pri monochromatickom postupe, výsledná farebná paleta bude však výraznejšia. Neodporúča sa miešať farby teplých a studených odtieňov.

analogicke-farby
3. experimentujte s komplementárnymi farbami

Použitie farieb, ktoré vo farebnom kolese ležia oproti sebe môže byť veľmi zaujímavé. Najmä, ak vám ide o dizajn, ktorý doslova kričí o pozornosť návštevníkov vašej stránky. Dávajte si však pozor, ak zvolíte nevhodné farby, svojich potenciálnych zákazníkov môžete okamžite odohnať. Ak však veríte svojmu estetickému cíteniu, radi experimentujete a robíte na projekte, ktorému sa hodí trochu kontroverznosti, choďte do toho!

komplementarne-farby
4. …alebo rozdelte komplementárne farby

Ak potrebujete niečo, čo upúta pozornosť, no nechcete riskovať odchod 50% vašich návštevníkov, zvolte rozdelenie komplementárnych farieb. Určite si komplementárnu dvojicu a jednu z farieb následne rozdelte na dve k nej priľahlé faby. Dostanete skvelý základ 60-30-10 princípu. Dve priľahlé farby môžu tvoriť harmonický základ a komplementárna sa postará o pritiahnutie pozornosti.

rozdelene-komplementarne-farby
5. skúste to s farebným trojuholníkom

Opäť sme pri niečom výrazne farebnom. Nakreslite si do farebného kolesa rovnostranný trojuholník a pracujte s farbami, ktoré sa nachádzajú na jeho vrcholoch. Táto alternatíva môže byť veľmi farebná a žiarivá, ale tiež harmonická a upokojujúca, no stále originálna. Dôležité je, či použijete veľmi saturované farby alebo jemnejšie a krémovejšie odtiene.

triada-farieb
6. …alebo využite komplementárne dvojice

Ďalší zo smelých dizajnových tipov. Ide o spojenie dvoch komplementárnych dvojíc. Vzťah medzi nimi určuje pomyselný obdĺžnik vo farebnom kolese. Ako som už spomínala, práca s komplementárnymi farbami môže byť náročná. Myslite na to, keď sa budete rozhodovať pre tento 4-farebný model. Podľa toho, aké farby si zvolíte, výsledný efekt môže byť od neónovo žiarivého cez gýčovo nepríjemný až po vizuálne upokojujúci.

tetrada-farieb
To je všetko?

Nie. Týmto všetkým sa teória farieb len začína. Vynechala som veľké množstvo informácií o pôsobení jednotlivých farieb na človeka, o kultúrnych rozdieloch vo vnímaní farieb a tiež o ich symbolike. Teória farieb sama o sebe je veľkou témou a jej zúženie na oblasť webového dizajnu bohužiaľ nič nezjednodušuje. Existuje však zopár skvelých nástrojov, ktoré dokážu byť veľmi nápomocné. Práca s nimi je jednoduchá a zábavná, pričom vám zaručene ušetrí niekoľko minút či dokonca hodín pri vyberaní tých dokonalých farieb.

  • Free nástroj na miešanie farieb od Adobu.
  • Interaktívny nástroj na farebnú inšpiráciu s názvom Colordot.
  • Ak to myslíte s web dizajnom vážne, skôr či neskôr sa nevyhnete práci s CSS. Keď ten čas príde, nástroj 147 colors vám padne vhod.
  • Oslovila vás nejaká fotografia a dumáte nad tým, ako trafiť podobnú farebnú schému? Mám pre vás riešenie: Color Palette Generator od Canvy. Stačí nahrať želanú fotku alebo obrázok a “vypľuje” vám to použité farby spolu s kódmi. Skvelé, nie?
  • Máte základnú farbu, no trápite sa s ostatnými? Skúste Color-HexStačí vložiť kód alebo názov farby a vyhodí vám to jej odtiene, monochromatickú paletu, analogické farby, farby triády a tiež komplementárnu farbu. Čo viac môže človek chcieť? Napríklad CSS3 kódy? Alebo percentový podiel v RGB či CMYK modeli? Žiaden problém, máte tam všetko!

Zaujíma vás ako pôsobia konkrétne farby na človeka? Alebo chcete vedieť, aká je najvhodnejšia farba call to action prvku? Prečítajte si náš článok o psychológii farieb a jej využití vo web dizajne. 

Meno*
E-mail*
Web
Komentár*

close

Čerstvé novinky

dajte-si-sisku

Páči sa vám článok?

Pridajte sa k nám a dostávajte tipy na články, ktoré vám pomôžu vybudovať unikátnu webovú identitu.