Kolory strony internetowej

Jak dobrać kolory i tło do strony internetowej?

Najpierw trzeba zrozumieć kolory w biznesie, zaczynając od podstaw.

Dlaczego powyższe kolory wyglądają inaczej, chociaż wszystkie są niebieskie?

Mimo, że wszystkie kolory, jakie przed chwilą zobaczyłeś mają jednakowy odcień (niebieski), różnią się jasnością.

Projektanci zazwyczaj skupiają się właśnie na odcieniu. W nim upatrują największego znaczenia.

To błąd!

Faktycznie, odcień wpływa na ludzką fizjologię. Ciepłe kolory zwiększają pobudzenie (zachęcają do spontanicznych zakupów).

Zimne barwy z kolei stymulują w mniejszym stopniu (nadają się świetnie do ofert wymagających przemyślenia lub negocjacji).

Zastanawiałeś się kiedyś, skąd biorą się upodobania kolorystyczne? Dlaczego pewne kolory uwielbiasz, a inne wydają Ci się brzydkie?

W pró­bach zro­zu­mie­nia tego, dla­cze­go ludzie lubią okre­ślo­ne kolo­ry, naukow­cy sku­pi­li się na ewo­lu­cji.

Wpływ ewolucji możesz zobaczyć na przykład w tym, że niektóre kobiety (nadal) w większym stopniu niż mężczyźni preferują czerwone odcienie.

Dzieje się tak m.in. dlatego, że samice z czasem wykształciły preferencję dla czerwonawych kolorów. Musiały rozpoznawać ciepłe odcienie na zielonych liściach podczas zbierania pożywienia.

Ta umiejętność pomagała im przetrwać. Była więc przekazywana z pokolenia na pokolenie.

Na to, czy lubisz dany kolor, wpływają również Twoje doświadczenia z przeszłości.

Nasze oso­bi­ste pre­fe­ren­cje zale­żą od wszyst­kich przed­mio­tów, któ­re napo­tka­li­śmy w swo­im życiu i tego, jak bar­dzo się nam podo­ba­ły. Od daw­na podej­rze­wa­na hipo­te­za, zosta­ła potwier­dzo­na. Ludzie lubią kolo­ry lubia­nych rze­czy.

Prawdopodobnie lubię fio­le­to­wy bar­dziej od Ciebie, ponie­waż pokój mojej bab­ci był fio­le­to­wy, a moje doświad­cze­nia z nim były pozy­tyw­ne.

Twój mózg tworzy i rozbudowuje sieć wiedzy.

Barwa niebieska może Ci się kojarzyć z oceanem, relaksem i przyjemnością. Szum fal, woda, ciepły piasek pod stopami i odprężenie są często wiązane właśnie z kolorem niebieskim.

Jednak, jeśli w Twoim doświadczeniu pojawiłyby się bolesne wspomnienia z barwą niebieską (np. wypadek z udziałem niebieskiego auta), nagle ten kolor stałby się dla Ciebie mniej atrakcyjny i przyjemny.

Co na to badania?

Schloss i jego współ­pra­cow­nik Stephen Palmer w ramach serii eks­pe­ry­men­tów poka­zy­wa­li kolo­ro­we przed­mio­ty gru­pie uczest­ni­ków. Obrazki były ten­den­cyj­ne.

Nie­któ­rzy ludzie widzie­li przyjemne, ładne czer­wo­ne rze­czy (sma­ko­wi­te tru­skaw­ki) i nie­przy­jem­ne zie­lo­ne, jak na przy­kład śluz.

Inni widzie­li nie­przy­jem­ne rze­czy w kolo­rze czer­wo­nym, jak na przy­kład krew, i ład­ne zie­lo­ne, jak drze­wa.

Największe, światowe marki najczęściej wybierają do swojej identyfikacji wizualnej kolor niebieski. Jednak to wcale nie oznacza, że będzie on najlepszy również dla Twojego biznesu.

Z Amazonu korzysta masa ludzi, którzy nie przepadają za połączeniem czerni, bieli i pomarańczu. Mimo to bardzo lubią tę markę i chętnie od niej kupują.

Jeśli nie potrafisz na swojej stronie od razu przyciągnąć uwagi i zdobyć zaufania odwiedzających, prawdopodobnie stracisz ich na zawsze.

Teoria barw ułatwia projektowanie lepszych Landing Pages na
2 sposoby:

1. Wykorzystuje psychologię kolorów.

2. Określa udane kombinacje kolorystyczne.

Różne barwy mogą wywoływać różnorodne emocje u Twojej grupy docelowej (potencjalnych klientów), więc ważne jest, aby wybrać kolory, które przekazują wiadomość, jaką chcesz dostarczyć.

Niektóre wspólne skojarzenia kolorystyczne zostały wymienione poniżej.

Jednak nie sugeruj się wyłącznie powyższym zestawem cech wybierając kolory strony internetowej.

Próby dopasowania się do stereotypowych skojarzeń wcale nie dają aż tak dobrych rezultatów w biznesie, jak mogłoby się wydawać.

Badania wykazały, że wsparcie kolorem cech osobowości, które chcesz pokazać swoim klientom, jest ważniejsze dla dochodów Twojej firmy niż ogólne skojarzenia.

Przemyśl, jakie cechy i wrażenia powinni poczuć odwiedzający stronę, by wykonać na niej akcję, do której ich zachęcasz (konwersję).

Teraz wybierz kolory najlepiej odzwierciedlające te cechy. Sprawdź, czy pozwolą Ci też wyróżnić się od konkurencyjnych marek w Twojej branży. Nie chcesz być z nimi mylony.

Jeżeli nadal wahasz się i nie wiesz, które barwy pomogą Ci przekazać odpowiednią wiadomość klientom, przygotuj kilka wersji kolorystycznych strony i je przetestuj.

Opracuj makiety (uproszczone projekty), które różnią się tylko jedną cechą - kolorami. Zapytaj ludzi, którzy należą do Twojej wymarzonej grupy odbiorców, co o nich myślą.

Przemyśl, jakie cechy i wrażenia powinni poczuć odwiedzający stronę, by wykonać na niej akcję, do której ich zachęcasz (konwersję).

Teraz wybierz kolory najlepiej odzwierciedlające te cechy. Sprawdź, czy pozwolą Ci też wyróżnić się od konkurencyjnych marek w Twojej branży. Nie chcesz być z nimi mylony.

Jeżeli nadal wahasz się i nie wiesz, które barwy pomogą Ci przekazać odpowiednią wiadomość klientom, przygotuj kilka wersji kolorystycznych strony i je przetestuj.

Opracuj makiety (uproszczone projekty), które różnią się tylko jedną cechą - kolorami. Zapytaj ludzi, którzy należą do Twojej wymarzonej grupy odbiorców, co o nich myślą.

Jest jeszcze jedna rzecz, którą musisz wziąć pod uwagę wybierając kolory strony - to jej przejrzystość.

W praktyce kolory są bardziej czytelne na tle o wysokim kontraście (np. czarny tekst na białym tle).

Skuteczność Landing Page zależy od tego, czy odwiedzający są w stanie szybko i bez wysiłku zrozumieć jego treści.

Poniższe schematy kolorystyczne pomogą Ci znaleźć barwy, które wzajemnie się uzupełniają i dobrze ze sobą współgrają. Dzięki temu będzie Ci łatwiej dobrać odpowiednie tło do strony internetowej.

Schematy monochromatyczne zakładają użycie tylko jednego odcienia. Dzięki nim osiągniesz bardziej spójny i jednolity wygląd strony internetowej.

Schematy analogiczne używają odcieni, które sąsiadują ze sobą na kole kolorów. Pomagają stworzyć poczucie spójności, jednocześnie dając większą różnorodność barw niż schemat monochromatyczny.

Schematy komplementarne wykorzystują kolory po przeciwnych stronach palety barw. Kolory te tworzą wysoki kontrast, który przyciąga uwagę do obiektu na pierwszym planie. Warto podkreślać w ten sposób przyciski akcji (CTA) na stronie.

Schematy rozdzielno-komplementarne używają dwóch barw, które sąsiadują ze sobą i jednego uzupełniającego po przeciwnej stronie palety kolorów.

Ten zabieg łagodzi ekstremalny kontrast kolorów uzupełniających.

Schematy triadyczne wykorzystują trzy kolory, które są równomiernie oddalone od siebie na kole barw. Ten odstęp tworzy przyjemny, zrównoważony wygląd.

Zapewnia równowagę pomiędzy prostotą schematów monochromatycznych a kontrastem schematów komplementarnych.

Tetrady obejmują dwie pary dowolnych barw komplementarnych (nie muszą one sąsiadować ze sobą na kole kolorów). Ogromne znaczenie ma tu “wyczucie barw” i odnalezienie w nich przyjemnego balansu.

Przyjrzyjmy się teraz działaniu teorii na realnych przykładach.

Coca-Cola od ponad 100 lat używa czerwieni i bieli. To połączenie kolorystyczne zapewnia kontrast i czytelność, a jednocześnie promuje przyjazne cechy Coca-Coli: energię, odwagę, siłę i zapał.

McDonald chce być kojarzony z przyjemnością, radością i szczęściem. Nie ma chyba lepszej barwy od żółtej, aby osiągnąć ten cel. W połączeniu z czerwienią pobudza apetyt.

Kolor fioletowy przywodzi na myśl magię, kreatywność i prestiż. Play wpisuje się w to idealnie. Buduje wizerunek innowacyjnej, dynamicznej marki. Dodając do swojej identyfikacji barwę białą, kojarzy się też z uczciwością.

Apple wykorzystuje prostą, czarno-białą kolorystyką. Wysoki kontrast sprawia, że tekst jest łatwy do odczytania, co zapewnia dostępność dla wszystkich użytkowników.

Wyraziste białe tło na stronie sprawia, że czarne elementy stają się centralnym punktem, subtelnie podkreślając główne wartości marki: moc, elegancję, wyrafinowanie i efektywność.

Zieleń jest kolorem łatwym do przetworzenia przez ludzkie oko. To jego ogromny atut. Oprócz tego kojarzy się ze zdrowiem, równowagą i odbudową. Właśnie na takim wizerunku zależy marce Starbucks.

Przejdźmy w końcu do sprzedawania w sieci.

Odkrywanie „naj­lep­sze­go” kolo­ru dla wskaź­ni­ków kon­wer­sji na stro­nach inter­ne­to­wych (czyli wskaź­ni­ka zamia­ny odwie­dza­ją­cych w kupu­ją­cych) sta­ło się bar­dzo popu­lar­nym tema­tem.

Fizjologiczna zasa­da, zna­na jako efekt izo­la­cji, mówi, że ele­ment, któ­ry bar­dzo się wyróż­nia, zosta­je łatwiej zapa­mię­ta­ny. Badania wyraź­nie poka­zu­ją, że uczest­ni­cy są w sta­nie lepiej roz­po­znać przed­miot (czy jest to tekst, czy obraz), gdy ten rażą­co róż­ni się od oto­cze­nia.

Badania este­tycz­nych reak­cji na połą­cze­nia kolo­rów i pre­fe­ren­cji klien­tów dla okre­ślo­nych połą­czeń kolo­ry­stycz­nych rów­nież udo­wod­ni­ły, że zna­czą­ca więk­szość klien­tów pre­fe­ru­je połą­cze­nia kolo­rów o podob­nych bar­wach, z wyraź­nie kon­tra­stu­ją­cy­mi akcen­ta­mi kolo­ry­stycz­ny­mi.

Weźmy na przy­kład ten czę­sto cyto­wa­ny przy­pa­dek popra­wy kon­wer­sji w wyni­ku zmia­ny kolo­ru przy­ci­sku.

Zmiana kolo­ru przy­ci­sku na czer­wo­ny popra­wi­ła kon­wer­sje o 21%, jed­nak to nie ozna­cza, że czer­wo­ny ma jakąś magicz­ną moc, któ­ra skła­nia ludzi do pod­ję­cia dzia­ła­nia.

To oczy­wi­ste, że jeże­li resz­ta stro­ny jest w odcie­niach zie­le­ni, to zie­lo­ne call to action po pro­stu zle­wa się z oto­cze­niem. Z dru­giej stro­ny czer­wo­ny sta­no­wi moc­ny kon­trast kolo­ry­stycz­ny (i jest kolo­rem dopeł­nia­ją­cym dla zie­lo­ne­go).

Zgodnie z wyni­ka­mi tego bada­nia, gdy ankie­to­wa­nych popro­szo­no o oce­nę pro­duk­tów, któ­rych kolo­ry mia­ły róż­ne nazwy (jak na przy­kład kosme­ty­ki), oka­za­ło się, że „wymyśl­ne” nazwy były pre­fe­ro­wa­ne dużo czę­ściej.

Na przy­kład kolor „mok­ka” był dużo bar­dziej lubia­ny niż „brą­zo­wy” – mimo, że naukow­cy poka­zy­wa­li bada­nym ten sam kolor!

Dodatkowe bada­nia wyka­za­ły, że ten sam efekt ma miej­sce w przy­pad­ku sze­ro­kiej gamy pro­duk­tów. Klien­ci oce­nia­li skom­pli­ko­wa­ne nazwy kolo­rów farb jako mil­sze dla oka niż ich odpo­wied­ni­ki z pro­sty­mi nazwa­mi.

Żelki o takich nazwach, jak „raz­zma­tazz” były wybie­ra­ne dużo chęt­niej niż te o nazwie „cytry­no­wy żół­ty”.

Taki sam efekt odkry­to w przy­pad­ku pro­duk­tów niespożywczych, np. w wypad­ku bluz.

Bez wzglę­du na to, jak dziw­ne może się to wyda­wać, wybór kre­atyw­nych, opi­so­wych i zapa­da­ją­cych w pamięć nazw do opi­sa­nia okre­ślo­nych kolorów (jak na przy­kład “błę­kit nie­ba”, a nie “jasno­nie­bie­ski”) może być waż­ny, jeśli cho­dzi o upew­nie­nie się, że pro­dukt będzie wywo­ły­wał duże wra­że­nie.

Znaczenie kolorów zależy w dużej mierze od przeszłych doświadczeń konkretnego człowieka i kultury, z którą się utożsamia.

Na Zachodzie kolor niebieski budzi pozytywne skojarzenia, podczas gdy w Iranie ma charakter żałobny.

Z kolei ciężar może przedstawiać inne idee: znaczenie, trwałość, gęstość, a nawet cenę i ruch.

Ciężar sugeruje ważność.

Ciemne kolory wyglądają na cięższe i mogą wywoływać wrażenie, że coś jest ważne.

Skoro coś jest cięższe, prawdopodobnie jest również solidniejsze.

Produkty o ciemnej barwie wydają się być bardziej trwałe.

Białe tło dodaje przedmiotom lekkości.

Za to ciemniejsze sprawia, że prezentują się jako gęstsze, bogatsze, sycące.

Biel jest często postrzegana jako wolna przestrzeń. Może pomóc w stworzeniu poczucia ruchu lub przepływu.

Decydując się na wybór jasnej lub ciemnej kolorystyki strony internetowej, weź pod uwagę kilka kwestii.

Biały interfejs ułatwia działanie na stronie:

Ciemny interfejs utrudnia opuszczenie strony:

Biel i czerń są zwykle postrzegane jako symbole dnia i nocy.

Jasne kolory sprzyjają widoczności, podczas gdy ciemne ją utrudniają. Ta widoczność może wpływać na percepcję i zachowanie.

Kiedy ludzie czują się bardziej widoczni, mają tendencję do wykonywania "dobrych" uczynków. Dlatego strony organizacji pomocowych powinny korzystać z białego tła na swoich stronach.

Za to ciemne kolory mogą się sprawdzić np. w firmach tworzących oprogramowanie. Klienci tego typu marek zazwyczaj chcą ukryć swoje błędy.

Mózg kojarzy nasycenie z wielkością. Takie kolory przykuwają uwagę i sprawiają, że obiekt wydaje się większy niż jest w rzeczywistości.

Nasycone kolory wydają się bliższe.

Bliskość obiektu może wpływać na to, jak bardzo zwracamy na niego uwagę. Nasycony kolor przykuwa uwagę. Wtedy mózg zakłada, że obiekt jest bliżej niż w rzeczywistości.

Ten efekt występuje również w przypadku czasu.

Użycie nasyconego koloru w przypadku terminu promocji może sprawić, że będzie się wydawał jeszcze bliższy i mocniej zmotywuje do działania.

Marki luksusowe są aspiracyjne. Pożądamy ich, ponieważ czujemy, że się odległe i poza naszym zasięgiem.

Jednak, kiedy prezentujesz odbiorcom bardzo dużą ilość szczegółów, zrezygnuj z nasyconych barw. W tym konkretnym przypadku zamiast wesprzeć tekst sprawią, że projekt stanie się nieznośnie przytłaczający.

Dzieje się tak dlatego, że w mózgu istnieją te same obwody dla obu rodzajów ciepła.

Oznacza to tyle, że jeśli szukasz ciepła społecznego, Twój mózg nieświadomie poszukuje ciepła fizycznego. Dlatego ludzie, którzy czują się samotni wolą cieplejsze bodźce (np. ciepły prysznic, gorące jedzenie).

Z tego samego powodu osoby w czerwonym ubraniu wydają się bardziej atrakcyjne.

To ważna informacja dla przedsiębiorców, których usługi i produkty są wykorzystywane w kontekstach społecznych.

Ciepłe barwy, np. czerwień, świetnie sprawdzają się w projektach aplikacji randkowych, wydarzeń towarzyskich, czy konferencji.

Ciepłe i nasycone kolory działają pobudzająco. Pobudzenie z kolei sprawia, że klienci poświęcają mniej czasu na rozmyślanie i działają szybko.

Jeśli zachęcasz odbiorców do spontanicznych zakupów, takie barwy świetnie się do tego nadają.

Z drugiej strony projektując ekrany ładowania, postaw raczej na kolor niebieski, gdyż on sprawia, że użytkownicy czują się bardziej zrelaksowani.

Kolor czerwony kojarzy się z agresją i dominacją. Aukcje eBay, które wykorzystują czerwone tło zyskują wyższe oferty. Dzieje się tak dlatego, że ludzie licytują bardziej agresywnie i zdecydowanie.

Projektując stronę internetową masz niemal nieograniczone możliwości doboru kolorystyki. To wszystko, o czym dotąd przeczytałeś, potraktuj jako sugestie.

Odpowiedni kolor jest w stanie pomóc Ci w zwiększeniu sprzedaży,
a niewłaściwy może wprowadzić klientów w błąd i zniechęcić ich od kupowania.

Testuj swoje wybory, a jeśli chcesz mieć pewność, że wszystkie elementy strony będę realizować Twoje cele biznesowe, zamów projekt strony u nas.

Po więcej wskazówek zajrzyj do naszego poradnika, na temat tworzenia stron internetowych.