Znaczenie kolorów na stronach internetowych

Znaczenie kolorów na stronach internetowych

Dlaczego Facebook, Twitter i LinkedIn stosują niebieski kolor? Jaki cel ma Instagram, wplatając odcienie niebieskiego w interfejs zarówno strony internetowej, jak i aplikacji mobilnej? Czy według Ciebie Coca-Cola celowo postawiła na czerwoną barwę, czy też nie? Na wszystkie te pytania jak najbardziej da się znaleźć odpowiedź. Wielkie korporacje absolutnie nie dobrały kolorów w sposób przypadkowy. Zatem jakie jest znaczenie kolorów na stronach internetowych?

Kolory w każdym z nas wywołują emocje. Od zaufania, poprzez zadowolenie, aż po niepokój. Bardzo dobrze wiedzą o tym wszyscy specjaliści od marketingu. Konsumenci niejednokrotnie dokonują zakupów, bazując na osobistych preferencjach dotyczących konkretnych barw – zarówno mając na względzie kolor nabywanego produktu, jak i kolorystykę przyporządkowaną marce producenta. Przyjrzyjmy się więc bliżej poszczególnym kolorom.

1. Niebieski.

Facebook i niebieski kolor

Wywołałem go już we wstępie do tego wpisu. Nie bez powodu, ponieważ w wielu mediach społecznościowych oraz na niezliczonej ilości stron internetowych kolor ten występuje bardzo często. Jakie cechy przypisuje się niebieskiemu? Przede wszystkim zaufanie, rzetelność i stateczność. Pomyśl – czy znasz jakieś restauracje wykorzystujące ten kolor? Ja też nie, ponieważ jego zastosowanie jest zupełnie inne i absolutnie nie kojarzy się z gastronomią.

Facebook, Twitter i LinkedIn to jedynie wierzchołek góry lodowej. Warto przywołać też takie marki jak np. Hewlett-Packard, Dell, IBM czy WordPress – wszystkie jednoznacznie powiązane z technologią. Można także znaleźć kilka marek samochodów – Volkswagen, Subaru, Ford, Peugeot. Nie ma co się dziwić, ponieważ zarówno w kwestii technologii, jak i motoryzacji zaufanie oraz bezpieczeństwo są kluczowe i to właśnie tych cech poszukujemy.

Tak, niebieski jest zdecydowanie królem wśród kolorów na stronach internetowych.

2. Czerwony.

Coca-Cola i kolor czerwony

Spośród wszystkich kolorów na stronach internetowych, kolor czerwony wywołuje największe emocje. Wykorzystywany jest przez restauracje, producentów żywności oraz firmy tworzące zabawki dla dzieci. Bardzo często widzimy też zestawienie różnych promocji lub okazji właśnie z kolorem czerwonym – po to, aby wywołać w nas określone emocje. Jeżeli pomyślimy o markach powiązanych z branżą spożywczą, nasza pierwsza myśl to Coca-Cola, McDonald’s i KFC. Do tego możemy dorzucić jeszcze Lay’s. Jaki cel mają producenci, wykorzystując kolor czerwony? Chcą wzbudzić w nas fascynację, chęć do działania i pragnienie wrażeń. I tak też często jest. Doskwiera nam mały głód lub pragnienie? Sięgamy więc po Coca-Colę ze sklepowej lodówki lub zajeżdżamy do McDonald’s na szybkiego hamburgera.

3. Zielony.

Zielone logo

Kolor natury i ekologii. Zielonych barw mamy w przyrodzie pod dostatkiem, toteż wywołują one w nas spokój i opanowanie, zestawiane są też z rozwojem i przede wszystkim zdrowiem. Wiele fundacji i organizacji związanych ze zdrowiem ma strony internetowe w zielonej kolorystyce. Barwy te są też często wykorzystywane jako elementy interfejsu, odnoszące się do usług przyjaznych, o wysokiej jakości. Myśląc o markach jednoznacznie kojarzących się nam z kolorem zielonym, które z nich przychodzą nam do głowy? Przede wszystkim Animal Planet, BP, Starbucks, Tic Tac oraz niezliczone firmy powiązane ze słowem „eco” lub „green”. Skojarzenia są tutaj bardzo oczywiste i jednoznaczne.

4. Żółty i pomarańczowy.

McDonald's kolory

Oba te kolory wziąłem pod uwagę razem, ponieważ w wielu przypadkach posiadają wspólne cechy. Przypisuje się im przede wszystkim optymizm i ciepło. Dodatkowo firmy wykorzystują te barwy do budowania w nas swego rodzaju chwili zastanowienia – wszystko to w celu wywołania w nas chęci kupna produktu lub skorzystania z konkretnej usługi. Idealnym przykładem jest tutaj McDonald’s, gdzie najczęściej zestawia się żółte logo z czerwonym tłem.

Mówi się też, że kolor żółty najszybciej i najmocniej przyciąga naszą uwagę. Nie bez powodu znaki ostrzegawcze w Polsce i wielu innych krajach mają żółte tło. Dowiedziono także, że kolor ten bardzo pobudza pracę naszego umysłu (stymuluje system nerwowy, wpływa na pamięć) – fakt ten wykorzystuje się np. przy produkcji ołówków, gdzie większość z nich lakierowana jest właśnie na żółto.

5. Fioletowy.

Fioletowa korona

Od dawna kojarzony przede wszystkim z luksusem, wiedzą i respektem. W tym wypadku mamy do czynienia z całą gamą zastosowań, aczkolwiek z pewnością do najstarszych zalicza się wykorzystywanie fioletowych barw na dworach królewskich. Fioletowe zasłony, poszycia mebli, zdobione insygnia królewskie – wszystko to miało przypominać rangę osoby posiadającej wspomniane przedmioty.

Jakie marki wykorzystują odcienie fioletu? Yahoo, Play czy Cadbury. Zauważono też, że wielu producentów wyrobów czekoladowych posiada fioletowe barwy w swoich logo.

6. Biały.

Logo Apple

Jeden z ciekawszych kolorów na stronach internetowych. Po pierwsze, z pewnością kojarzy się nam z czystością, prostotą oraz neutralnością. Kolor biały zestawia się też z kreatywnością, dlatego że jest tak na dobrą sprawę stanem wyjściowym do dalszej pracy. Pustka powoduje w nas chęć zapełnienia tej przestrzeni, zastąpienia bieli innym kolorem.

W kwestii elegancji i prostoty prym zdecydowanie wiedzie Apple. Co prawda możemy zaobserwować coraz większą chęć innych producentów do wykorzystywania białego koloru w swoich produktach, jednak nie oszukujmy się – biały smartfon czy notebook niemal natychmiast przywołuje nam na myśl Apple. Taki też zresztą był i jest nadal cel marketingowców – starają się tworzyć produkty bogate w możliwości, jednak w prostej (co nie znaczy, że banalnej lub bez wyrazu) oprawie. Dzięki temu przeciętny konsument ma chęć posiadania „produktu premium”, uważa go za rzecz wyższej jakości i wartą kupna, nierzadko pomimo wysokiej ceny.

7. Czarny.

Logo YSL i Chanel

Tutaj sprawa nieco komplikuje się, ponieważ z racji bardzo częstego wykorzystywania tego koloru można przypisać mu wiele znaczeń. Jednak fundamenty nie uległy zmianie, czerń symbolizuje głównie klasę, elegancję i tradycję. Nie bez powodu takie marki jak Chanel, Yves Saint Laurent czy Karl Lagerfeld oparły swoje logo o czerń i biel. Skojarzenie jest proste – ich odzież ma być ekskluzywna i z wyższej półki.

Z czarnym kolorem kojarzą się również producenci odzieży sportowej, tacy jak Adidas czy Nike. Chociaż w tym przypadku ich sygnety są na tyle zakorzenione w naszej świadomości, że nawet występujące w różnych wersjach kolorystycznych zawsze będą budziły w nas silne skojarzenie z marką.

Jak odpowiednio dobierać kolory?

Google Design

Z pomocą przychodzi nam Google, a dokładniej Google Design. Możemy odnaleźć tam wiele gotowych schematów kolorystycznych, zestawień barw i odcieni. Poniżej tabelek widzimy także przykłady bardzo dobrze zaprojektowanych interfejsów graficznych. Google radzi wybierać nam:

  • kolor podstawowy w trzech odcieniach
  • kolor pomocniczy (akcent), bardzo kontrastowy do podstawowego
  • neutralne tło – białe lub szare

W ten sposób powinniśmy uzyskać prostą, aczkolwiek funkcjonalną paletę barw mającą zastosowanie przy tworzeniu stron internetowych lub aplikacji mobilnych.

Jednym ze sposobów doboru odpowiednich kolorów jest też skorzystanie z koła barw.

Koło barw

Jak widać na powyższej grafice, mamy do dyspozycji sześć różniących się od siebie kolorów, które można z kolei przyporządkować do kilku różnych grup (podstawowe, poboczne, ciepłe, zimne). Kluczem jest wybór dwóch kolorów najmocniej kontrastujących ze sobą. Dzięki temu uzyskujemy przyjemną dla oka mieszankę kolorów na stronach internetowych.

Znaczenie kolorów na stronach internetowych – podsumowanie

Jak widać, kolory mają swoje znaczenie, a ich właściwe zestawianie ze sobą jest fundamentem przy kreowaniu marki. Wniosek jest banalny, ale i trudny w swojej prostocie: należy łączyć ze sobą kolory, które po prostu pasują do siebie. Obojętnie czy mówimy o tworzeniu stron internetowych, projektowaniu aplikacji mobilnych, czy też o stosowaniu kolorów w codziennych, życiowych sytuacjach.

Spodobał Ci się ten tekst?

Jeśli sądzisz, że moglibyśmy Tobie pomóc, odezwij się do nas. Wypełnij bardzo prosty formularz szybkiej wyceny. Gwarantujemy szybką odpowiedź.

  1. Psyxocukier

    http://www.colourlovers.com/ też nie jest zła. pozdrawiam

    Odpowiedz
    • MobileTry logo
      MobileTry

      Bardzo dobra strona – tym bardziej, że to społeczeństwo tworzy tam palety barw. Dzięki!

  2. Delfina

    Bardzo ciekawy artykuł. Z pewnością dla wielu osób będzie niezwykle przydatny i ułatwi pracę nad stroną lub blogiem.

    Odpowiedz
  3. Alicja

    Nigdy nie pomyślałabym, iż istnieje cała ,,polityka kolorowa”, a odcienie logo są efektem ściśle przemyślanych działań. Ale teraz,po przeczytaniu tego posta w sumie faktycznie widzę, że to ma sens – czerwony nas ,,nakręca”, przyciąga, pobudza, a z kolei niebieski wzbudza zaufanie 🙂
    Ja mam kolory złote i brązowe na moim blogu – w końcu nazwa Złota Percepcja zobowiązuje – ale nie wiem jak można by to zinterpretować od tej strony, co proponujesz 🙂

    Odpowiedz
  4. Anna Valetta

    Ciekawy tekst. Polecam zerknięcie również na trochę inne oblicze tęczy:
    helpscout

    Odpowiedz
    • MobileTry logo
      MobileTry

      Faktycznie, bardzo ciekawy artykuł. Dzięki!

  5. Magda Dwa Plus Dwa

    Osobiście nie przepadam za niebieskim, ale teraz wiem, dlaczego jest tak popularny w sieci i w …polityce. Owe niebieskie koszule 😉

    Odpowiedz
  6. Mr. T.

    Powiem szczerze, że od lat siedzę w temacie, ale tej stronki od Googla nie widziałem. Dzięki na pewno się przyda.

    Odpowiedz
  7. Tadeusz

    Świetny artykuł!!!

    Odpowiedz
  8. MobileTry logo
    MobileTry

    Czemu nie. 🙂 W Google Design Color można dobrać kilka tego typu barw, by ładnie współgrały ze sobą.

    Odpowiedz
Oświadczam, że akceptuję postanowienia zawarte w polityce prywatności. *

Michał Ziółkowski

Co-founder agencji interaktywnej MobileTry z Olsztyna, świadczącej kompleksowe usługi przede wszystkim małym firmom. Specjalizacją agencji jest tworzenie stron internetowych i sklepów internetowych. Ponadto MobileTry prowadzi kampanie reklamowe w internecie oraz oferuje usługi z zakresu pozycjonowania.

Mało czytania? Nie ma problemu!

Sprawdź inne teksty powiązane z tym artykułem

Michał Ziółkowski

5 lat temu

Porady dotyczące user interface – 7 ważnych kwestii

Oto nasze porady dotyczące user interface, których wcielenie w życie sprawi, że Twoja strona internetowa będzie bardziej przyjazna odbiorcom. Sprawdź je!

Michał Ziółkowski

5 lat temu

Proces tworzenia strony internetowej – na czym polega?

Z jakich kroków składa się proces tworzenia strony internetowej? Jakie jego aspekty są istotne, a które mniej? Zobacz, jak proces ten powinien przebiegać.

Michał Ziółkowski

5 lat temu

Najczęstsze błędy typograficzne na stronach internetowych

Jakie są najczęstsze błędy typograficzne na stronach internetowych? Dlaczego należy ich bezwzględnie unikać na własnej stronie? Poznaj nasz poradnik.

Jakub Ozorowski

5 lat temu

Aktualizacja strony internetowej – kiedy najlepiej ją przeprowadzić?

W którym momencie aktualizacja strony internetowej powinna być przeprowadzona? Po czym poznać, że najwyższy czas na zmiany? Poznaj nasz poradnik.

Jakub Ozorowski

5 lat temu

Tworzenie własnego portfolio – co warto mieć na uwadze?

Tworzenie własnego portfolio to proces, który musi być solidnie przemyślany. Sprawdź więc, w jaki sposób można stworzyć własną, skuteczną teczkę z pracami.

Michał Ziółkowski

5 lat temu

Strona internetowa projektanta wnętrz – 9 niezbędnych rzeczy

Jakie elementy powinna zawierać idealna strona internetowa projektanta wnętrz? Na co projektanci powinni zwracać szczególną uwagę? Odpowiadamy!