Blog.
Najnowsze WYDARZENIA!

Jak stosować kolory na stronie internetowej?

Dodane przez: Michał | dnia 18.07.2019 | Tagi: kolor

Kolory na stronie www mają znaczenie!

Kolor wpływa nie tylko na nasze emocje, ale nawet na zachowania. Każda osoba ma podświadomie zakodowaną paletę barw, która wywołuje określone reakcje i skojarzenia. Często są one ściśle związane z wcześniejszymi doświadczeniami oraz bardzo indywidualnymi wspomnieniami. Jeżeli w domu rodzinnym ściany były pomalowane na żółto i w naszej pamięci dominują wyjątkowo pozytywne reminiscencje z okresu dorastania, to barwa żółta zawsze będzie kojarzyć się z czymś przyjemnym.

Wpływem kolorów na człowieka zajmuje się psychologia koloru. Trudno w to uwierzyć, ale nawet stosunkowo niewielka zmiana odcienia czy nasycenia danego koloru może skutkować kompletnie innymi odczuciami u odbiorców. Co więcej, w wyniku różnic kulturowych jedna barwa może powodować zupełnie odmienne konotacje. O ile biel w naszym kręgu kulturowym kojarzy się z niewinnością, to w Indiach symbolizuje śmierć. Warto o takich różnicach pamiętać podczas projektowania stron internetowych, ale przede wszystkim skorzystać z dorobku psychologii kolorów.  Mimo pewnych rozbieżności w postrzeganiu poszczególnych barw, to ich siła oddziaływania jest na tyle mocna, że błędem byłoby rezygnowanie z wiedzy, jaką daje psychologia kolorów.

Dzięki dobrze dobranym barwom można delikatnie wpływać na reakcję odbiorców i kształtować pozytywne opinie na temat usług, produktów czy ogólnie całej strony www. W zależności od potrzeb łatwo użytkownika zainspirować, wywołać określone uczucia, ale zarazem wzmocnić zaufanie do firmy. Dlatego lepiej nie bagatelizować roli barw na stronie internetowej. Trzeba do tej kwestii podejść bardzo świadomie i tak dobierać paletę kolorystyczną, aby wzmocnić konkretne cele komunikacyjne. I tu ważne podkreślenie – istotne jest odkrycie, jakie barwy zadziałają na odbiorców strony www, a nie na właściciela firmy.

Kolor czerwony

Wywołuje zdecydowanie największe emocje spośród wszystkich barw zastosowanych na stronie internetowej. Właśnie dlatego tak chętnie stosuje się elementy designu w tym kolorze przy tworzeniu serwisów www dla producentów żywności, restauracji, ale również dla przedsiębiorstw wykonujących zabawki dla dzieci. Na czerwono opłaca się przedstawiać wszelkiego typu promocje, kluczowe treści lub inne ważne detale. Wszystko po to, aby dany element wyróżnić, wzbudzić chęć do działania albo fascynację. Czerwony przycisk z napisem „dodaj do koszyka” na pewno nie umknie uwadze, a ponadto wpłynie na podniesienie konwersji.

Nieprzypadkowo czerwień pojawia się nie tylko w logo, ale i na stronie internetowej takich marek, jak Coca-Cola, KFC czy Lay`s. Ciekawostka – aż 29% ze 100 największych światowych marek ma kolor czerwony. Ważne jest też to, że czerwień lubią zarówno kobiety, jak i mężczyźni.

Kolor niebieski

W pewnym sensie można go uznać za swoiste przeciwieństwo czerwieni, ponieważ raczej studzi emocje niż je podsyca. Dlatego tak chętnie ta barwa jest wykorzystywana przez firmy pragnące kojarzyć się z bezpieczeństwem, zaufaniem i rzetelnością. Jeżeli podstawową kwestią, jakie chcesz komunikować swoim klientom jest zaufanie, to najlepszym rozwiązaniem jest zastosowanie odcieni niebieskiego. Sięga po nie branża samochodowa (Ford, Volkswagen), finansowa, B2B, ale również marki związane z technologią, jak IBM, Dell, Hewlet-Packard czy też tuzy social media, jak Facebook, Twitter oraz Linkedin – najwięcej, bo aż 33% topowych marek ma właśnie kolor niebieski, który zdecydowanie króluje wśród innych barw na stronach www.

Co więcej, w związku z tym, że ta barwa jest także kolorem wody i nieba, a tym samym ma wiele wspólnego z naturą, to niebieski idealnie nadaje się jako element strony internetowej dla firm z branży hydraulicznej, medycznej, farmaceutycznej, elektrycznej lub energetycznej. Prowadzisz biznes związany z jedzeniem? W takim razie raczej unikaj tej barwy na swojej stronie.

Kolor zielony

Kojarzy się z naturą, ekologią, ale i zdrowiem, harmonią oraz pieniędzmi. Wykazuje działanie uspokajające, wręcz kojące. Trudno się zatem dziwić, że po ten kolor chętnie sięgają firmy podkreślające działanie w zgodzie z naturą. Zieloną kolorystykę stron internetowych wykorzystują zatem marki powiązane ze słowem „eco”, ale również ze zdrowym żywieniem, suplementami diety, rolnictwem, ogrodnictwem. To barwa zdecydowanie pokazująca przywiązanie do środowiska, wręcz można ją uznać za symbol natury. Zieleń kojarzy się ze Starbucksem, Subway, ale i BP. Co więcej, niektóre tony zieleni wzmacniają kreatywność, więc można zastosować przyciski CTA w tym kolorze, o ile nie ma innych elementów zielonych na stronie. To niezwykle istotne, ponieważ w innym przypadku zieleń nie będzie widoczna i przełoży się to na znaczny spadek poziomu konwersji.

Kolor żółty

Kojarzy się z radością, optymizmem i ciepłem, ale jednocześnie najbardziej przyciąga wzrok – nie ma przypadku tym, że ostrzegawcze znaki drogowe mają żółte tło. Na stronie internetowej szczególnie mocno kontrastuje z bielą, ale również z czernią. Doskonale się sprawdza, jako barwa przycisków służących odbiorcom do podejmowania kluczowych decyzji np. zakupowych – często to widać na stronie McDonald ‘s. Warto zaznaczyć, że 13% spośród największych marek światowych ma kolor żółty. Jeżeli chcemy szczególnie wyróżnić jakiś jeden element na stronie, to spektakularne efekty osiąga się poprzez zastosowanie właśnie koloru żółtego na białym tle.

Kolor pomarańczowy

Jest w dużym stopniu skorelowany ze swoimi barwami składowymi, a więc żółtą i czerwoną. To niezwykle energiczna barwa, od razu angażująca do działania. Nic dziwnego, że przyciski CTA na allegro są właśnie w tym kolorze – w końcu mają zachęcać do dokonania zakupu i rzeczywiście pomarańczowy można wykorzystać w celu podniesienia konwersji na stronie. Pomarańczowy również pobudza aktywność i współzawodnictwo, ale zarazem zaufanie. Chętnie jest stosowany na stronach produktów dla dzieci czy dla sportowców. Co ciekawe, w wielu przypadkach oznaczenie danego produktu czy usługi w tym kolorze sprawia, że jest on odbierany, jako tańszy niż inne. Może dlatego warto na pomarańczowo podkreślać wszelkie oferty promocyjne.

Kolor różowy

Kojarzy się z miłością, romantyzmem i kobietą. Chyba mało osób zdaje sobie sprawę z faktu, że dopiero w latach 70. ubiegłego wieku zaczął być wiązany z płcią żeńską (wcześniej to jasnoniebieski pełnił tę funkcję). Elementy barwne w różu wykorzystuje się chętnie na stronach internetowych firm kosmetycznych, salonów piękna i produktów dla pań praktycznie w każdym wieku. Jednak cały ten wywód dotyczy wyłącznie klasycznego różu, ponieważ firma T-mobile wręcz odczarowała jeden z jego odcieni, a mianowicie magentę. To już barwa niezwykle energetyczna i kreatywna dedykowana w zasadzie dla każdego, także dla mężczyzn. Trudno się zatem dziwić, że firma Tauron również skorzystała z walorów magenty na swojej stronie internetowej (oraz w logo oczywiście).

Kolor fioletowy

Barwa nacechowana wyraźnie dostojnością i przepychem królewskim (w końcu chętnie stosowana na dworach), zatem sięgają po nią firmy kosmetyczne. To również innowacja i kreatywność, co jakże mocno podkreśla sieć Play. Nie można też pominąć producentów wyrobów czekoladowych z Milką na czele, którzy jakże chętnie wykorzystują fiolet w logo i na stronach www.

Kolor biały

To uniwersalny kolor dopełniający, który doskonale komponuje się z każdym innym. Świetnie sprawdza się, jako tło. Zdecydowanie łatwiej czytać ciemny tekst na białym tle niż odwrotnie, ponieważ mniej męczy się wzrok. Biel kojarzy się z prostotą, czystością i neutralnością, więc jest po prostu niezawodna na stronach internetowych, które mają być przejrzyste i czytelne. Jednocześnie sprawia wrażenie dużej przestrzenności, no i elegancji. Fantastycznie te cechy wykorzystuje firma Apple, ale i marki kosmetyczne.

Kolor czarny

Poza dość oczywistym skojarzeniem z żałobą (kłania się branża funeralna), to czerń należy też uznać za symbol luksusu, wysokich standardów i wyrafinowania. Na pewno wzbudza szacunek i pewien respekt. Dlatego to kolor biznesu, ale i ekskluzywnych marek z najwyższej półki. Wystarczy spojrzeć na strony www Karla Lagerfelda, Yves Saint Laurenta czy Chanel. Stosowanie w ich przypadku czerni jest bardzo jasne – to odzież czy kosmetyki z najwyższej półki. Jednak równie chętnie po ten kolor sięgają producenci odzieży sportowej czy branża motoryzacyjna. 18% ze stu największych marek światowych ma właśnie kolor czarny.

Kolor brązowy

To w sumie ciekawy przypadek. Z jednej strony ta barwa symbolizuje bezpieczeństwo i stabilizację (stąd jej obecność w logo i elementach znajdujących się na stronie Nest Banku czy UPS) oraz tradycję (strony winiarni), ale jednocześnie brązowy jest jednym z najmniej lubianych kolorów i to zarówno przez panie, jak i przez panów. Oczywiście nie oznacza to, że należy z brązu całkowicie zrezygnować, jednak warto o tej swoistej niechęci pamiętać przy projektowaniu strony.

Postrzeganie kolorów a strona internetowa

Każdy grafik podczas pracy nad barwnym designem strony www powinien uwzględniać preferencje kolorystyczne grupy docelowej. Badania wyraźnie potwierdzają, że w znaczący sposób to płeć je determinuje, ale także wiek. Pierwsza kwestia, kobiety z reguły nie mają problemów z określeniem niuansów odcieni i doskonale widzą różnice pomiędzy amarantowym, biskupim a magentą. Dla większości mężczyzn będzie to po prostu kolor różowy. Druga kwestia, o ile panie wolą barwy pastelowe (o mniejszym nasyceniu), to panowie wyraźne, mocne, nawet kontrastowe. Widać to nawet w zestawieniu bieli i czerni. Oznaczający czystość i delikatność kolor biały na pewno lepiej definiuje płeć piękną. Z kolei uosabiający siłę i pewność siebie kolor czarny jest bardziej preferowany przez płeć męską. Mało tego, panowie są zwolennikami wszelkich odcieni szarości, aż do takich wpadających w czerń. Kobiety wolą też barwy w jaśniejszych odcieniach niż mężczyźni.

Co więcej, im człowiek starszy, tym mniejsza jego tolerancja dla barw jaskrawych i kontrastowych, które zaczynają po prostu drażnić. Stają się tym samym mało atrakcyjne. O powyższych aspektach nie można zapominać przy tworzeniu lub modernizacji strony internetowej, jeżeli ma ona być targetowana na określoną płeć czy grupę wiekową. Warto również wspomnieć o wszelkich odstępstwach od reguły wynikających nie tylko z indywidualnych upodobań, ale także z czynników kulturowych. W cywilizacji zachodniej czarny symbolizuje żałobę, ale już w Indiach takim kolorem jest biel. Podobnie jest z barwą wybieraną przez panny młode. O ile dla kultury Zachodu takim kolorem jest tradycyjnie biel, to dla Chinek czerwień. Warto takie kwestie uwzględnić, jeżeli firma kieruje swoją ofertę miedzy innymi na tamtejszy rynek.

Kolor na stronie internetowej – podstawowe kwestie

W przestrzeni internetowej coraz rzadziej można zobaczyć strony – potworki kolorystyczne, które atakują feerią barw, aż trudno cokolwiek znaleźć czy przeczytać. Świadomość, że strona powinna być jak najbardziej czytelna i przejrzysta staje się powoli normą. Każdy element barwny należy zatem dobrze przemyśleć. Odpowiednim kolorem warto podkreślić szczególnie kilka detali, a zwłaszcza:

  • Stopkę
  • Nawigację
  • Przyciski CTA wzywające do określonej akcji (zakupu, subskrypcji, kontaktu itp.)
  • Elementy brandingowe, w tym logo
  • Linki
  • Sekcje sąsiadujące
  • Ważne informacje

W każdym razie kolorami warto podkreślać kluczowe obszary czy treści na stronie. Barwna ramka bądź tekst w kontrastowym odcieniu od razu rzuca się w oczy, jeżeli tło pozostanie białe lub bardzo jasne. To wyjątkowo ważne w przypadku buttonów.

Bardzo istotne też, aby nie przesadzać z nasyceniem kolorystycznym, ale również z kolorami jaskrawymi. Im więcej różnorodnych, jaskrawych kolorów, tym trudniej skupić się na treści. Jeżeli zależy nam na wezwaniu do działania czy jakiejkolwiek innej aktywizacji odbiorcy, to należy zastosować wyraziste barwy, jak żółty, czerwony lub pomarańczowy i to raczej w ich jaśniejszej tonacji. Praktyka pokazuje, że ciemniejsze kolory obniżają współczynnik konwersji.

Warto też pamiętać, że czarne lub ciemne jednolite tło sprawia, że strona szybko męczy wzrok użytkownika, a nawet staje się mało czytelna. Jeżeli już chcemy czarne tło, to najlepiej nie dawać go na całość strony, a jedynie na jakiś wybrany fragment. W każdym razie najbardziej sprawdza się tło neutralne, a więc w bieli lub jasnej szarości.

Dobór optymalnej kolorystyki na pewno nie jest sprawą łatwą. Kolory oddziałują na odbiorcę i jeden może uspokajać, ale inny aktywizować i zachęcać do zakupu albo ostrzegać. Nie da się ukryć, że przed grafikiem trudne zadanie dopasowania barw spełniających swoje funkcje psychologiczne i jednocześnie korespondujących z przeznaczeniem danej strony www. Przy wyborze, należy zatem dokładnie przeanalizować wiele elementów, a przede wszystkim:

  • Specyfikę danej branży – to, co sprawdza się na stronach dedykowanych usługom hydraulicznym niekoniecznie będzie mieć zastosowanie w branży outdoorowej
  • Konkretny typ serwisu www – trochę inne zasady odnoszą się do bloga niż do portalu informacyjnego, sklepu internetowego czy strony firmowej
  • Target, a więc grupę docelową – kolorystyka zależy od płci, wieku, ale i grupy społecznej
  • Motto i przesłanie – kolor zielony dla firmy sprzedającej żywność ekologiczną nie jest przecież przypadkowy
  • Chęć wywołania określonego nastroju bądź reakcji odbiorcy

Zasady doboru kolorów na stronie www

Przy dobieraniu odpowiedniej kolorystyki na stronę warto skorzystać z koła barw. Historia tej koncepcji sięga końca XVII wieku – do każdego stopnia koła jest przypisany konkretny kolor, zatem suma 360 stopni obejmuje cały zakres kolorów widzialnych. Odcień danej barwy jest jaśniejszy, im bliżej centrum owego koła. Poprzez wykorzystanie tego koła bez problemu kreuje się zarówno harmonijne, jak i kontrastowe zestawienia.

dobór kolorów przez grafika

Zasada triady kolorów

triada kolorów
W tym przypadku należy wybrać trzy kolory rozmieszczone równomierne wokół koła, co 120 stopni. Dzięki temu łatwo uzyskać niezwykle harmonijne, aczkolwiek bardzo żywe kompozycje. Triada stanowi coś pośredniego pomiędzy wyjątkowo kontrastowymi kolorami komplementarnymi a podobnymi do siebie kolorami analogicznymi. Jeżeli połączenie wydaje się nieco zbyt krzykliwe, to wyjściem z sytuacji jest zestawienie odcieni znajdujących się bliżej środka, które mają trochę więcej bieli. Bardzo ważne, aby kolory dokładnie wyważyć – najlepiej, kiedy jeden dominuje, a pozostałe dwa odpowiednio go akcentują.

Zasada kolorów dopełniających

kolory dopełniające
Tym razem mamy do czynienia z parą kolorów zlokalizowanych naprzeciw siebie, z jednym dominującym. To pozwala uzyskać kontrast, więc sprawdza się, aby podkreślić szczególnie ważne informacje np. przyciski CTA albo oddzielić istotne detale od elementów dominujących np. zdjęć. Wybór doskonały do nowoczesnych, bardzo odważnych projektów. Warto jednak pamiętać, aby nie przedobrzyć, ponieważ łączenia komplementarne dość szybko męczą oczy – na pewno nie nadają się, jeżeli strona www skierowana jest przede wszystkim do osób starszych.

Odmianą tej kombinacji jest zasada kolorów dzieląco-uzupełniających, która polega na dobraniu do koloru bazowego dwóch barw uzupełniających. W ten sposób uzyskuje się trochę mniej nasycony kontrast wizualny.

Zasada kolorów analogicznych

kolory analogowe
To barwy sąsiadujące, dzięki czemu można osiągnąć niesamowitą harmonię i bardzo spokojną, miłą dla oka kompozycję. Ważne, aby zachować odpowiednią różnicę kontrastu oraz ograniczyć się do 3, maksymalnie 5 barw.

Zasada monochromatyczności

kolory monochromatyczne
Zgodnie z nazwą, wybiera się odcienie tylko jednego koloru zlokalizowane na linii od centrum do brzegu koła. W ten sposób powstaje bardzo stonowany wizualnie projekt.

Zasada prostokąta

zasada prostokąta
Stosuje się cztery kolory ułożone w uzupełniające się dwie pary. Kluczowe okazuje się zachowanie równowagi pomiędzy ciepłymi a zimnymi barwami. Najlepiej, kiedy dominuje jeden kolor.

Zasada kwadratu

zasada kwadratu
Kojarzy się z poprzednią, z tym że barwy są równomiernie rozmieszczone na kole. Podobnie należy zwrócić uwagę na balans pomiędzy kolorami ciepłymi i chłodnymi, a także na postawienie na jeden kolor dominujący.

Kolory na stronie internetowej nie mogą być przypadkowe!

Na koniec jeszcze raz mocno warto podkreślić, że umiejętne posługiwanie się barwami na stronie www jest jednym z najtrudniejszych elementów projektowania ciekawej wizualnie strony. Kolory muszą mieć swoje uzasadnienie w kontekście nie tylko czytelności i przejrzystości całej kompozycji, ale także branży, w której się specjalizujesz oraz odbiorcy, do którego chcesz się odnieść. Nieważne, jakie barwy preferujesz – jeżeli kompletnie nie nadają się do projektu Twojej strony, to nie ma sensu ryzykować i upierać się na ich zastosowanie.

Pamiętaj, że liczy się przede wszystkim to, w jaki sposób Twoja strona www zostanie odebrana przez użytkownika i czy będzie dobrym świadectwem dla Twojej działalności. Dlatego zaufaj naszemu doświadczeniu i skorzystaj z naszej pomocy, a Twoja strona internetowa pozytywnie zaskoczy Twoich obecnych i przyszłych klientów. 

Tagi: kolor
Powrót na początek