Marketingový a webový blog

ultimátní tipy pro výběr barev na web

5 ulimátních tipů, podle čeho vybírat barvy na web

S výběrem těch správných barev si spousta lidí většinou láme hlavu. I při mých prvních projektech to byla výzva, a přesně proto vám v dnešním blogovém článku ukážu, čemu se při výběru barev vyhnout obloukem a čemu naopak jít s otevřenou náručí strmě naproti.

Většinu návštěvníků ovlivní na první pohled právě barva, která je jedna z nejdůležitějších faktorů značky. Než tedy vůbec začnete webovou stránku tvořit, je důležité si uvědomit, jak chcete svoji značku a podnikání koncipovat. Pokud již máte vytvořené logo či vypracovanou vizuální identitu, implementujte do webdesignu přesné kódy barev (#0000BB, #000000 apod.) společně s ostatními barvami, které spolu budou tvořit jakousi symbiózu. 

Pokud vaše webová stránka bude barevná jako “žužu” bonbónky (jako duha), ale vy jako firma se soutředíte na B2B obchod třeba v oblasti logistiky, strojírenství apod., tak je asi víc než jasné, že vaše tržby a reputace u byznys partnerů budou klesat.

Ve chvíli, kdy píšu tento článek, zrovna uzavíráme spolupráci s klientem (jehož web bude dostupný v následujících týdnech na našem webu), kterého nedává smysl stavět na zelené louce. V tomto kontextu mám na mysli výběr správné palety barev pro web, jelikož už nějakou dobu figuruje a je aktivní na sociálních sítích, kde publikuje velmi kvalitní a hodnotný obsah.

Pokud bychom nyní zvolili pro web barvy, které jsou diametrálně odlišné od palety barev, kterou klient používá na svých sociálních sítích, zhoršili bychom klientovi jeho image, důvěryhodnost, dost pravděpodobně i konverzní poměr webu a dále bychom v potenciálních zákaznících vyvolali zbytečně moc otázek.

“Poselství” tedy zní, pokud již máte zavedenou značku na sociálních sítích, nedává smysl ji rozbíjet na webu. Lidé jsou již na něco zvyklý a změna návyků je velice, velice nepříjemná pro majoritní část společnosti.

Pravděpodobně víte či tušíte, že různé barvy dokážou v lidech vyvolat různé emoce, pocity, dojmy a nálady. Slovo manipulace jsem tedy použil velmi nadseně. Otázkou tedy je, jaké emoce chcete v zákaznících vyvolat?

Odpověď na otázku výše je samozřejmě vždy odlišná, a přesně proto nebudu paušalizovat a raději uvedu praktický příklad na našem týmu.

Jak v LeogyCreatives manipulujeme barvami?

Pro zvýšení jistoty: V LeogyCreatives rozhodně nemanipulujeme, slovo výše jsem použil v nadšeném významu… Pravdou ale je, že pokud bychom celý web koncipovali do červené, tak bychom vzbudili úplně odlišný první dojem, jelikož červená, jak se ještě dozvíte, symbolizuje agresi a nebezpečí – záleží samozřejmě na kontextu a dalších barvách.

My jsme si zvolili modrou (#0000BB), jelikož chceme působit kvalitně, spolehlivě a důvěryhodně. Tím vším se modrá barva vyznačuje. Kvalita a spolehlivost jsou bezpochyby vedlejším efektem všech našich hodnot.

Obecně můžu ještě alespoň zmínit, že by každý hned měl rozpoznat, kdo jste a co děláte a hlavně by barvy měly sedět k vašemu oboru. Níže jsem rozepsal příklady konkrétních společností a významy barev, které používají:

  • Červená (Coca-Cola, Netflix, YouTube)
    • Upoutává pozornost, vzrušuje, probuzuje vášeň, symbolizuje energii, může povzbudit chuť k jídlu
      • Často, ale ne u těchto společnosti samozřejmě, červená značí nebezpečí
  • Oranžová (Fanta, Amazon, Nickelodeon)
    • Probuzuje kreativitu, dobrodružství a nadšení. Symbolizuje úspěch a humor
  • Žlutá (McDonalds, Shell, Ferrari, IKEA)
    • Symbolizuje optimismus, štěstí, pozitivitu a radost
  • Zelená (John Deere, Android, Starbucks)
    • Zelenou si lidský mozek typicky asociuje s přírodou, penězi, růstem, prosperitou, silným zdravím, klidem, bezpečím a harmonií
  • Modrá (Facebook, Skype, DELL, Asus)
    • Naše modrá oblíbenkyně symbolizuje stabilitu, harmonii, klid, důvěryhodnost, kvalitu, spolehlivost, bezpečí
    • V některých případech může vzbuzovat depresi či chlad
  • Fialová (Lakers, Yahoo!, Twitch)
    • Velmi oblíbená barva mezi podnikateli, jelikož si ji člověk asociuje s mocí, luxusem, moudrostí, spiritualitou, kreativitou, loajalitou, odvahou, magií, ale i tajemstvím, frustrací a arogancí
  • Růžová (Barbie, T-mobile, LG)
    • Typická, dnes už ne holčičí barva vyjadřuje ženskost, hravost, lásku, něžnost, náklonnost a štěstí
    • Může zvyšovat chuť k jídlu
  • Hnědá (UPS, M&M’s, Nespresso)
    • Uvědomili jste si někdy, že při ranní kávičce se vždy díváte na hnědou, která značí pohodlí, bezpečnost, přirozenost a vážnost?
  • Bílá (Adidas, Vans)
    • Bílá je na jedné ze stran Jinu a Jangu – symbolizuje nevinnost, dobrotu, čistotu, pokoru, jednoduchost a v některých případech i chlad
  • Černá (Nike, Disney, Channel)
    • Osobně mám černou velmi rád a to více, když vím, že se vyznačuje především tajemstvím, sílou, elegancí, luxusem a minimalismem.
    • Asi ale znáte, že v určitých kontextech a situacích značí deprese, úzkosti, tmu a smrt…
  • Šedá (Apple, Jeep, Wikipedie)
    • Šedá je velmi typická pro Mercedesi (osobně preferuji matnou šedou) a značí neutrálnost, pokoru, rovnováhu, konzervativnost a serióznost.

Jedním z hlavních grafických principů je, že barvy musí být v kontrastu, čímž docílíte lepší čitelnosti textu a vyvolání silnějších emocí. Bohužel na to spousta lidí zapomíná, ale dobře pro nás – čím horších webů bude, tím větší máme příležitost k získání pozornosti.

Zkuste paletu barev zúžit. Web tak nebude tolik “křičet” barvami, které návštěvníka sice zaujmou, ale důsledkem bude jen rozptýlení a zmatení. V praxi si většinou používají 2-3 barvy, ale mohou být i výjimky, samozřejmě…

jak má vypadat kontrast barev

Jak už jsem říkal, většinou nejlepší počet barev, které použít jsou 3-4. Když si dokážete takovou paletu vybrat, vyhráli jste. Opět vám představím, jak tento princip aplikujeme my v LeogyCreatives.

  • Dominantní barva z majoritní části zastupuje design a je nejvíce výrazná.
  • Doplňkové barvy by měly kontrastovat s dominantní barvou a typicky se používají na různé elementy, vizuální doplňky a text.
  • Akcentní barvy jsou velmi výrazné a měli by se používat pro získání pozornosti – tipicky se na web implementují v podobě CTA tlačítek
využití barev na webové stránce

Co to je pravidlo 60/30/10 a jak ho aplikovat?

Pravidlo 60/30/10  vyjadřuje poměr využití daných barev. Lidsky, neodborně to znamená, že dominantní barva by měla mít na webu největší podíl, doplňkové barvy by měly web doplňovat tak, aby to bylo pro oči vizuálně přitažlivé, ale zároveň nebralo tolik pozornosti – jinak návštěvníky unavíte a roztříštíte pozornost. Číslo 10 v tomto pravidle vyjadřuje akcentní barvu, kterou používejte zejména na CTA tlačítka a barvy odkazů.

  • Pokud máte již zvolenou dominantní barvu, využijte tuto stránku, která vám sama a zdarma pomůže najít další barvy do barevné palety – https://mycolor.space/

Jsem přesvědčený, že vám tento blogový článek pomohl a máte z větší části jasno, jak barvy nejen vybrat, ale hlavně jak a kdy je použít. A nakonec, jako vždy, pokud chcete využít audit webu zdarma nebo začít pracovat na vlastním webu, který bude mít výsledky, klikněte na tlačítko níže 🙂

Martin-Knoz-portret

MUDr. Martin Knoz Ph.D.

operacelymfedemu.cz
Oceňuji spolupráci s Kamilem Vítkem, jeho profesionalitu a úsilí, které dalo vzniknout informativnímu webu o unikátním operačním řešení na principech Supermikrochirurgie, tj. operacích na průměrech cév menších jak 0.8 mm. Mám v úmyslu dále s Kamilem Vítkem spolupracovat na rozšíření webu a na vzniku dalších webů pojednávajících o rekonstrukční mikrochirurgii a supermikrochirurgii, estetické a plastické chirurgii.

Jako vedoucí lékař pro vědu a výzkum univerzitní Kliniky plastické a Estetické chirurgie fakultní nemocnice U Sv. Anny v Brně a největšího mikrochirurgického centra v České Republice, doporučuji Kamila Vítka jako inovativního a kreativního tvůrce webů.
tanec-se-zrzkou-mockup-web

Tanec se Zrzečkou, aneb web plný energie, vášně a radosti

Klientka Michaela Blanku kontaktovala poté, co zahlédla její video na Tiktoku. Na konzultaci jí klienta pověděla její představy. Vede kurzy tance a tábory pro děti. Blanka s klientkou řešila, jak co nejsnažším způsobem předat rodičům veškeré informace.

Vyplnění dotazníku

Blančinna klientka ze všeho nejdříve vyplnila dotazník, ve kterém se objevovaly zapeklité otázky ohledně její obchodní strategie, cílů podnikání a informací o průběhu jejích tanečních lekcí. Z dotazníku si Blanka vytáhla podstané informace,  které budou její cílovou skupinu - rodiče - nejvíce zajímat, co je může přimět k nákupu lekcí. Michaela není "byznysmenka", a přesně podle toho tak Blanka web koncipovala.
tanec-se-zrzeckou-struktura-min
tanec-se-zrzeckou-graficky-navrhStreet-dance-Tanec-se-Zrzeckou

Grafické návrhy a tvoření webu

Blanka vytvořila více návrhů, ale vyhrál až ten třetí, ze kterého byla klientka doslova nadšená, a tak ji nechala volnou roku při návrhu dalších podstránek.

Web Blanka tvořila na tzv. WordPressu, na kterém běžím téměř 50% všech webových stránek po celém světe, s použitím programu Divi Builder, který je uživatelsky velmi přívětivý, a tak si klientka může v případě krajní nouze provést drobné úpravy i sama, a to bez jakýchkoliv programátroských dovedností. Celá spolupráce od první konzultace až po zveřejnění webu trvala asi dva měsíce, nicméně tím to nekončí - Blanka o web nadále pečuje.

Výsledky

Zajímavostí je, že při procesu tvorby se dělal kompletní rebrand. Kontaktní formuláře fungují tak, jak mají, ale co je důležité, děti se přihlašují.

Reference

„Paní Blanku doporučuji všemi deseti 🙌🏻 lepšího člověka pro tvorbu a správu webu jsem si nemohla vybrat. Spolehlivost, rychlost, originalita, komunikace, vstřícnost, ochota, vše perfektní 🙏🏻 moc ráda s p. Blankou spolupracuji a za vše jí nesmírně moc děkuji. Jsem nadmíru spokojená klientka.“ – Michaela Tláskalová

ondrej-zeman-mockup-web

Web pro mladého fotografa Ondru

Ondra je doslova blázen do focení a má ambice růst. "Jelikož se s Kamilem znám mnoho let, tak jsem ho požádal o vytvoření svého webu, protože jsem chtěl získat své první klienty". Nebylo čas na nic čekat, a tak jsem se dal do práce a během měsíce jsem vytvořil web, který prezentuje Ondru jako osobu, ale především jeho skvělé dovednosti a portfolio.

Ondrove očekávání, cíle a představy

Nejprve jsme si s Ondrou společně vše ujasnili. Ondra chtěl získat svého prvního klienta, ale zároveň chce, aby mu web přinášel klienty další - to je skvělý a rozumný cíl.

Vytvoření návrhu sturktury a vizuálu

Jako první jsem vytvořil návrh struktury webu, což je v podstatě taková "mapa průchodnosti", na které si Ondra dokázal představit, kam a kudy se návštěvník webu dostane. Po schválení jsem vytvořil i grafický návrh celého webu. Ondra mi k tomu přidal své námitky, podle kterých jsem udělal další úpravy a poté jsem začal web konečně tvořit. 

Tvoření a správa webu

Web jsem tvořil v tzv. WordPressu, na kterém běží skoro 50% všech webových stránek po celém světě. Využíval jsem intuitivní a uživatelsky přívětivý program Divi Builder, který Ondrovi v naléhavém případě umožňuje provádět změny na webu, a to i bez programátorských znalostí.

Web je strukturovaný tak, aby budoval důvěryhodnost pomocí prezentace portfolia a zkušeností. Následně představuje orientační ceník doprovázený s výzvou k akci, která je hezky viditelná ve více částech webu, čímž se podpoří výše konverzního poměru (=kolik návštěvníků webu odešle zprávu kontaktním formulářem).

Výsledky

Jelikož je Ondra aktivní na sociálních sítích, tak pro něj nebyl až takový problém na web získat návštěvnost. Doslova za pár dnů se mu ozval majitel nové místní "kebabárny", se kterým se domluvil na nafocení fotek jeho prodejny, ale hlavně šťavnatého masa.
S Ondrou nadále spolupracuji a dokonce je členem i našeho Leogy týmu, kde zastupuje pozici Fotograf.
Zobrazit web