Jste tu poprvé? - Skrýt (musíte být přihlášeni)

10

Použitelnost v praxi 6. - Jak účinně využívat barvy

Jedním z častých problémů začínajících tvůrců jsou barvy. Nepříjemné a agresivní barvy mohou úplně změnit dojem z celého webu, což odnesou návštěvníci a ve výsledku i vy. Stejně jako většina dalších věcí se tato část tvorby dá zlepšit praxí a procvičováním, ale existují i obecné rady, čím se řídit a které vám mohou výrazně pomoct v krátkém čase.

Upozornění: Pro nově příchozí - tato série článků na blogu reprezentuje moje osobní názory, které se vždy snažím podepřít rozumnými argumenty. Mým úmyslem je jednak informovat ostatní, jednak rozpoutat diskuzi o dané problematice - protože ne vždy musím mít pravdu a zvlášť u nejistých témat (kdy se "domnívám" a spíš tak trochu hádám) ocením názor ostatních.

Nebudu psát o psychologii barev nebo vás poučovat o tom, jaké barvy patří k jakému typu webů - na tohle téma pravidelně vznikají kvalitní články v zahraničí, takže bych se cítil jako při nošení dříví do lesa. Navíc sám nejsem zrovna studnice vědomocí a volím barvy spíš podle instinktu, barvy které mi přijdou zajímavé a které podle mě nejsou úplně mimo téma. To ale přeci jen z nějakých znalostí a vědomocí vychází, i když u mě to zřejmě už funguje tak, že za mě pracuje podvědomí (ale taky ne vždy to vyjde :), pokusím se sepsat rady jak barvy volit podle situace, a ne podle toho, jaké účinky se jednotlivým barvám přisuzují.

Každý se při výběru barev řídí zčásti svým vkusem. To je něco, co se nedá naučit, ale musí se vypěstovat. Proto si nebudeme dělat legraci z toho, že někdo barvy vůbec nezvládl, ale zkusíme podobné přešlapy shrnout do několika příkladů. Nebudu vás tedy učit jak volit barvy jako já, ale můžu vám říct jak barvy obecně používám.

Pamatujte na to, že dobré barvy mohou výrazně pozdvihnout kvality designu, ale v opačném případě ho taky úplně potopit. Narozdíl od detailů a maličkostí barvy ve vašem designu zanechávají na návštěvníky skutečný dojem, a zároveň jim pomáhají s orientací podle toho, jak je využíváte. Pokud je zanedbáte, snižujete nejen vizuální kvalitu, ale i použitelnost vašeho designu.

Jak s barvami začínat

Pokud máte problémy s výběrem barev a jste pravidelně vystavováni posměchu, začněte tím, že omezíte svůj výběr na pastelové a usedlé barvy (obecně můžeme říct, že jde o barvy s nižší sytostí, třeba do 30% a vysokou světlostí). Je vždy lepší, když je vám vytýkána vyblitost barev než jejich agresivita. Omezenější výběr vám dává menší volnost, ale také znamená méně chyb. Nebojte se tedy držet konzervativních kombinaci. Můžete si dovolit udělat třeba 5 modrých designů, pokud vám z toho nebude nakonec až špatně. Postupně, jak se budete cítit sebejistější, rozšiřujte barevný výběr dle libosti.

Pastelové barvy jsem nezmínil jen tak z legrace. Vezměte si k srdci, že se musíte vyvarovat intenzivních barev na velkých plochách. Je lepší použít barvu, kterou vám ostatní zhodnotí jako nevýraznou, než plácnout na pozadí agresivní zelenou a veškerý obsah tak udělat nepříjemný k čtení. Proto ve většině případů používejte mírné barvy a syté si nechte na aktivní plochy jako tlačítka, nadpisy a podobné věci. Narozdíl od plakátů a podobných věcí z reálného světa se na digitální grafiku koukáme jinak, a u vašich stránek, vyvedených červenou barvou, málokdo stráví dost času, protože ho rozbolí oči.

Nevybírejte hned první odstín barvy, který vám přijde pod ruku. Měňte barvy a zkoušejte, jak vypadají a jak reagují na jiné odstíny. V naprosté většině případů, i pokud už máte opravdu dobré oko na barvy, první odstín nebývá to nejlepší, s čím můžete přijít.

Nepoužívejte agresivní barvy na velké plochy

Proč? Protože jsou na velké ploše nepříjemné, bolí z nich oči, přicházíte tak o možnost upozornit barvami na důležité (a menší) obsahové prvky a navíc výrazné barvy podporují bannerovou slepotu (stav, kdy návštěvník vědomně ignoruje přehnaně výrazné objekty, které považuje za reklamu - nikde se nedá předem zjistit, kolik lidí tak bude reagovat a jak velký problém může nastat, ale neměli byste to podceňovat - člověk, vaší vinou co přehlédne to nejdůležitější na stránkách, může prostě odejít a už se nevrátit).

Existuje několik vyjímek - za předpokladu, že se pozadí nechystáte použít na celém webu, ale jen na jeho části, například výrazné hlavičce, která má zaujmout, můžete na pozadí využít syté a výrazné barvy, pokud jim snížíte světlost - to je opak jemných barev zmíněných výše, kde snižujete sytost. Většina barev je tak snesitelná, pokud má sníženou světlost třeba na 70% v kombinaci se sytostí třeba 80%. Tady je třeba experimentovat, ale ctěte pravidlo raději méně než více. Další vyjímkou je černá, a pro mě i žlutá, která tvoří tak trochu speciální barvu. Jednak se dá žlutá kombinovat prakticky se vším a můžete z toho vyjít relativně beztrestně, a také při intenzivnějších odstínech nepůsobí tak agresivně jako jiné barvy (to je můj dojem, možná je váš jiný). Proto se osobně odvažuji použít žlutou sytou i světlou, což bych u jiných barev nezkoušel.

Pokud se tedy rozhodnete na menší části pozadí intenzivnější barvu využít (pokud nejde o specializovaný web, jako portfolio, nebo něco umělecky zaměřeného, ale spíš o konzumní web, nedělejte to), dbejte kromě přijatelného odstínu i na to, aby se vám barva nepletla s barvami, které mají důležité obsahové prvky - pozadí je musí podporovat, ne snižovat jejich výraznost.

Zdokonalování

Nepřehánějte to s počtem barev! I když s šetrným použitím může design přežít větší množství barev, za vhodné považuji mít maximálně 4 hlavní barvy a dále je dělit na různé odstíny (pokud používám jiný odstín jedné barvy, nepovažuji ji za jinou barvu, pokud není výrazně odlišná od originálu). Rozhodně můžete používat dodatečné barvy na různé štítky nebo nálepky, ale s citem a ohledem k použité paletě. Stejně tak nemusíte lpět na jedné barvě, design pak často působí utahaně, protože využíváte jen různé odstíny toho samého. Zdravé je kombinovat několik barev, pro mě je ideální případ 3. Samotné kombinace barev a co se k sobě hodí jsou materiál na jiný článek, stejně tak kde brát inspiraci. Naprosto upřímně, velmi často se inspiruji barvami s jiných designů, protože vidět, jak něco opravdu dobře funguje v praxi je nejlepší. Existují stránky jako colorlovers.com, které poskytují často pěkné kolekce barev (obvykle 3 základní a 2 doplňkové varianty), ale bohužel jde o kombinace, které nejsou vymýšleny s konkrétním účelem a často u webů moc nefungují.

Snažte se určit si barvy co nejdřív a pokud jste s nimi opravdu spokojeni, lpěte na nich. Dobrý design často začíná prototypem, který je černobílý, i když já pracuji s barevnými, o kterých si povíme příště. V další fázi ale kromě vytváření detailu designu musíte správně určit barvy, a to pro někoho bývá problém, pokud si je vymýšlí během tvorby. Snažte si tedy vymezit moment, kdy budete řešit jenom barvy a jejich vztahy. Nebudete řešit detaily tlačítka nebo fonty, ale snažíte si představit, jak celek funguje v barevné kombinaci.

Pokud děláte zakázku pro klienta, důkladně barvy proberte při první barevné ukázce. Zažil jsem už dost případů, kdy byla dobrá barevná kombinace zničena klientovou nerozhodností a tím, že dal přednost vlastnímu vkusu před tím, co bylo rozumné, logické a funkční. Proto je třeba zdůraznit alespoň základně, jak jste barvy vybírali. Můžete začít svými vědomostmi o psychologii barev, které načerpáte ze zdrojů níže, a potom vyzdvihnout vztahy mezi obsahovými prvky a celkem - výrazné věci musí vystupovat, klasický obsah neutrální, a pozadí má vše podporovat a být v harmonii. Pokud se klient z ničeho nic rozhodne barvy měnit, snažte se ho přesvědčit o tom, že impulzivní jednání design může snadno zničit (a ja taky sobecké, protože se vyzdvihuje osobní preference před potřebami návštěvníků), protože i výběr barvy je náročná záležitost a nejde jen tak design úplně přebarvit, aniž by neutrpěla jeho kvalita.

Sám se ještě mám hodně co učit jak barvy využívat, hlavně vylepšit metodiku a nepostupovat tak chaoticky, což bývá můj největší problém. Ale postup do začátku je takto snad vytyčen - začít mírně a raději nic nepřehánět, a postupně se osmělovat a nebát se používat relativně nezvyklé kombinace. Jak získáte dostatek zkušeností, je už jen na vás, jak je zúročíte.

Skvělé články/weby, zabývající se psychologií barev (pouze anglicky)

colormatters.com

Celý web, věnující se problematice barev - můj tip. Vše je velmi podrobně vysvětleno a kvalitou se materiál blíží klasické knize.

Empathizing Color Psychology in Web Design

Stručný článek s řadou příkladů na známých webech. Nejprve máte vysvětleny vlastnosti barev a pak následuje přehled webů.

Effective Use of Color Psychology in Web Design

Podobný článek jako předchozí, ale rozdělený tak, že u každé barvy máte rovnou příklad webu a stručné shrnutí.

The Designer’s Handbook of Colors

Série miničlánků (odkazy na další článek jsou vždy vespod), která zahrnuje základní vlasnosti, přehledný graf preferencí dle pohlaví a odkazy na užitečné nástroje.

Petr Široký Profil na fóru / Osobní stránky / Twitter Webdesignér povoláním, kritik přesvědčením, šašek duší, to vše zde najdete. Tutoriarts jsou poslední 3 roky můj největší osobní projekt. Kromě toho se zkouším věnovat jiným menším webovým projektům, živím se jako nezávislý webový designér a snažím se více hledět do budoucnosti, aby tyto stránky vzkvétaly.

Komentáře k článku

Nejste přihlášeni - před odesláním příspěvku vyplňte protispamovou kontrolu níže - váš komentář bude viditelný až po schválení správcem. Pro okamžité schválení se přihlašte, nebo registrujte. Registrace nezabere déle než minutu.

  • :-D
  • 8-|
  • :-/
  • 8-)
  • :-(
  • :-O
  • =(
  • =D
  • :-)
  • <3
  • ;-)

* Povinné položky

  • #10
  • lefiath
  • 1. January 2012 | 12:19
  • Skupina: Správci

Improvizuj :) Jak postupovat v terénu už není součástí tohohle článku :) Osobně jsem rád, když mi dá zákazník úplnou volnost a nesvazuje mě.

  • #9
  • Shareaza
  • 31. December 2011 | 22:25
  • Skupina: Registrovaní Uživatelé

No a co když zákazník řekne že barvy nechá úplně na designérovy bo sám nemá žádnou představu a na první schůzce chce už vidět nějaký výsledek?

  • #8
  • lefiath
  • 14. December 2011 | 18:39
  • Skupina: Správci

Tak tomu bych se osobně spíš vyhnul - jistě, na dribbblu jsou někteří naprost famózní umělci a schopní autoři, ale častěji tam člověk narazí na lidi, kterým například slovo kontrast nic neříká.

A navíc jsou tam často prezentovány jenom části designu, když už se od něčeho inspirovat, tak je lepší vidět jak funguje celek.

  • #7
  • Neregistrovaný kolemjdoucí
  • 14. December 2011 | 16:43
  • Skupina: Neregistrovaní

Určite odporúčam prezerať si dizajny na dribbble, pri ktorých sú uvedné aj použité farby a ich odtiene. Skoro vždy ide o perfektnú farebnú kombináciu a keď človek pochopí prečo tieto farby a odtiene spolu fungujú posunie svoje dizajny o triedu vyššie.. ;-)

  • #6
  • Martys
  • 29. November 2011 | 16:05
  • Skupina: Registrovaní Uživatelé

V barvách se učím stále, zrovna na tom bojuji v grafickém návrhu. ;-)

  • #5
  • Thimo_cz
  • 23. November 2011 | 17:44
  • Skupina: Registrovaní Uživatelé

Dobrý článek, zrovna se "peru" s barvama pro jeden firemní web. Takže ses Lefe akorát trefil a pomohl mi - díky.

  • #4
  • exarion
  • 23. November 2011 | 17:42
  • Skupina: Registrovaní Uživatelé

Zrovna barvami webu, ktery jsi pouzil jako priklad, jsem se inspiroval v poslednim projektu :) Perfektni kombinace uklidnujici zelene v zahlavi a vyraznych zlutych prvku, stejne jako dobry kontrast vsech casti :D
Ja pridal do schematu v mensim meritku jeste fialovou.

Jinak pri navrhu barev (nejen u webu) mam tradicne nejvetsi problem se zelenou. Pri zobrazeni na tradicnich monitorech a monitorech notebooku mi zde vychazeji vzdy nejvetsi rozdily.

Colour lovers je dobry na inspiraci, treba vzit jednu konkretni barvu ze schematu, ale cele schema na webu moc nefunguje :)

  • #3
  • Jiri Brezovsky
  • 23. November 2011 | 16:41
  • Skupina: Neregistrovaní

Zajimavy clanek, s barvama jsem mel vzdy problem tak si o nich vzdy rad poctu :)

  • #2
  • lefiath
  • 23. November 2011 | 16:23
  • Skupina: Správci

Zmiňuji se o nich v textu, a příliš je nedoporučuji. Přečti si to, uvidíš proč.

  • #1
  • Delltar
  • 23. November 2011 | 14:37
  • Skupina: Registrovaní Uživatelé

K těm odkazům bych dodal ještě www.colourlovers.com Krom jiného se tam dají najít velmi pěkné barevné paletky :)

Nahoru

Autoři: Jakub Houdek, Jakub Šimůnek, Petr Široký a příležitostní sebevrazi