Jeśli chodzi o projektowanie stron internetowych, jedną z ważniejszych decyzji, które podejmiesz, jest wybór odpowiednich kolorów. Jest to wybór, który może dokonać lub złamać twój projekt, zwłaszcza jeśli weźmiesz pod uwagę wszystkie ruchome części, które wchodzą w tworzenie udanej witryny WordPress.

W dzisiejszych czasach istnieje duże prawdopodobieństwo, że jeśli posiadasz stronę internetową, posiadasz również firmę. A najważniejszą rzeczą dla witryny biznesowej jest dobry współczynnik konwersji. Jeśli Twoja witryna nie konwertuje, Twoja firma może równie dobrze zawiesić baner “zamknięty dla biznesu”.

Dlatego ważne jest, aby schemat kolorów witryny był zaplanowany, zamierzony – i co najważniejsze-zoptymalizowany pod kątem konwersji.

W tym artykule przyjrzymy się, w jaki sposób kolory wpływają na nasze życie i jak można je wykorzystać, aby poprawić sposób, w jaki potencjalni klienci lub klienci postrzegają Twoją witrynę i markę.

Dlaczego kolor jest tak ważny?

Kolor odgrywa ważną rolę w naszym codziennym życiu. Łączy się z naszymi uczuciami w wyjątkowy sposób, dzięki czemu jest potężnym narzędziem marketingowym do wykorzystania przy podejmowaniu decyzji projektowych. Twoje wybory kolorów muszą odzwierciedlać wiadomość, którą chcesz udostępnić o nadchodzącym wydarzeniu lub produkcie. Zazwyczaj kolor jest pierwszą rzeczą, która przyciągnie wzrok i wizualnie poprowadzi odwiedzających, dlatego ważne jest, aby kolory w Twoim projekcie były celowe i miały znaczenie w ich użyciu.

Według infografiki Kissmetric, 85% kupujących opiera swoją decyzję na samym kolorze. I według tej samej infografiki, właściwe użycie koloru prowadzi do 80% wzrostu rozpoznawalności marki.

Różne inne badania i testy dowiodły, że kolor może zwiększyć pamięć, angażować i zwiększać uczestnictwo, a także informować.

Jeśli przyjrzysz się bliżej powyższej infografice, zobaczysz, że Kissmetrics podpowiada, jakich kolorów powinieneś użyć w zależności od charakteru Twojej firmy. Łatwo byłoby założyć, że jeśli jesteś sklepem odzieżowym, powinieneś osiedlić się na różowej kolorystyce. Ale proces podejmowania decyzji nie jest jednoznaczny i ostateczne odpowiedzi nie istnieją. Zdaję sobie sprawę, że to nie jest zbyt pomocne. Przyjrzyjmy się jednak, jak działa teoria kolorów, aby uzyskać nieco więcej informacji o tym, jak wylądować na odpowiednim kolorze dla następnej witryny.

Easel illustration

Teoria Koloru

Teoria koloru jest tematem tak szerokim i różnorodnym, że napisano o niej wiele książek. Więc trzymamy się podstaw. Zasadniczo teoria koloru można podzielić na trzy główne części, ponieważ odnosi się do projektowania stron internetowych:

  1. Kontrast. W kategoriach laika kontrast jest różnicą między dwoma kolorami. Kontrast pełni dwie funkcje w projektowaniu stron internetowych: ustanawia czytelność oraz zwraca uwagę widza na konkretny element na stronie. Gdy masz wątpliwości, najlepszą praktyką jest wybranie bardzo jasnego koloru tła i bardzo ciemnego koloru samego tekstu.
  2. Uzupełnienie. Kolory uzupełniające znajdują się naprzeciwko siebie na kole kolorów. Na przykład, kolor uzupełniający czerwieni to zielony, a dopełnienie niebieskiego To pomarańczowy. Przy prawidłowym użyciu kolory te mogą się wzajemnie akcentować i tworzyć bardzo skuteczny schemat kolorów.
  3. Vibrancy. Odnosi się to do ogólnego nastroju poszczególnych zestawów kolorów: jaśniejsze, cieplejsze kolory (czerwony, pomarańczowy, żółty) mają tendencję do pobudzania nas, podczas gdy ciemniejsze, chłodniejsze odcienie (zielony, niebieski, fioletowy) wydają się być bardziej relaksujące i spokojne.

Znaczenia kolorów i kultura

Kolory mają różne znaczenia w różnych kulturach. Sposób, w jaki postrzegamy pewien kolor, może nie być taki sam, jak ktoś z Japonii lub Bliskiego Wschodu.  Planując stronę internetową, ważne jest, aby zrozumieć, kim są Twoi odbiorcy docelowi i jak ta konkretna kultura postrzega skojarzenia kolorów. Web Designer Depot ma wielki podział kolorów i ich znaczenia międzykulturowo. Podsumowałem je tutaj:

Czerwony

  • W kulturach zachodnich, takich jak Ameryka Północna i Europa, czerwony jest kolorem pasji i podniecenia. Symbolizuje niebezpieczeństwo, miłość, podniecenie i władzę, ale może również mieć negatywne konotacje, gdy jest połączony z krajami należącymi do wschodniego bloku komunistycznego.
  • W kulturach wschodnich i azjatyckich czerwony oznacza szczęście, radość i świętowanie; i jako taki, jest często noszony przez panny młode w dniu ślubu, ponieważ uważa się, że przynosi szczęście i szczęście.
  • Na Bliskim Wschodzie czerwony oznacza niebezpieczeństwo i ostrożność. Niektórzy uważają go również za kolor zła.

Pomarańczowy

  • Zachód postrzega pomarańczowy jako kolor zbiorów i jesieni. Tradycyjnie w Stanach Zjednoczonych orange oznacza sezon jesienny od września do Halloween, a następnie Święta Dziękczynienia pod koniec listopada.
  • Kultury indyjskie uważają pomarańczowy za święty kolor, podczas gdy w Japonii pomarańczowy symbolizuje odwagę i miłość.
  • Wreszcie Bliski Wschód kojarzy orange z żałobą i stratą.

Żółty

  • W kulturach zachodnich żółty kojarzy się z ciepłem, latem i gościnnością. Co dziwne, w Niemczech żółty kojarzy się z zazdrością, podczas gdy większość reszty świata kojarzy to uczucie z kolorem zielonym.
  • W kulturach wschodnich i azjatyckich żółty jest nie tylko uważany za święty, ale także Cesarski. W Indiach symbolizuje handel.
  • W przeciwieństwie do tego, w Ameryce Łacińskiej i Egipcie, żółty jest związany ze śmiercią i żałobą. Reszta kultur Bliskiego Wschodu postrzega żółty jako kolor szczęścia i dobrobytu.

Niebieski

  • Wiele zachodnich kultur używa niebieskiego Dla logo banku, ponieważ reprezentuje zaufanie i autorytet. Jest to również związane z narodzinami małych chłopców i uważane za uspokajające, kojące i spokojne. W negatywnym kontekście reprezentuje smutek i depresję.
  • W kulturach wschodnich i azjatyckich błękit kojarzy się z nieśmiertelnością i siłą. W przeciwieństwie do świata zachodniego, niebieski jest kobiecym kolorem w Chinach.
  • W Ameryce Łacińskiej niebieski jest często kojarzony z religią ze względu na wysoką obecność Kościoła Katolickiego.
  • Bliski Wschód widzi niebieski jako bezpieczny i chroniący, ponieważ jest to kolor związany z niebem, duchowością i nieśmiertelnością.

Zielony

  • Podczas gdy zachodnie Kultury kojarzą zielony głównie jako kolor Irlandczyków i szczęścia, zielony odnosi się również do natury, środowiska, ochrony przyczyn środowiskowych i postępu. W negatywnym kontekście zielony symbolizuje zazdrość lub zazdrość.
  • W kulturach wschodnich i azjatyckich zielony jest kolorem natury, płodności i młodości. Wiąże się to jednak również z niewiernością i egzorcyzmami.
  • W Ameryce Łacińskiej zielony jest kolorem śmierci.
  • Dla większości Bliskiego Wschodu zielony reprezentuje siłę, płodność, szczęście i bogactwo i jest najczęściej kojarzony z islamem.

Fioletowy

  • W kulturach zachodnich, jak również w większości kultur wschodnich i azjatyckich, fioletowy jest kolorem rodziny królewskiej i wiąże się z bogactwem i sławą.
  • Z drugiej strony, Ameryka Łacińska i Tajlandia widzą fioletowy jako kolor żałoby i śmierci.
  • Bliski Wschód postrzega purpurę jako symbol bogactwa.

Różowy

  • W kulturach zachodnich różowy jest kolorem kobiecości i oznacza narodziny córki. Reprezentuje również słodycz, dzieciństwo lub zabawę.
  • W kulturach wschodnich i azjatyckich różowy jest również uważany za Kobiecy, gdzie oznacza również małżeństwo. Wyjątkiem są Chiny, które, jak wspomniano powyżej, postrzegają niebieski jako kobiecy kolor.
  • W Ameryce Łacińskiej różowy jest często używany jako kolor budynków, podczas gdy Bliski Wschód nie wiąże różu z niczym szczególnym.

Brązowy

  • Kultury Zachodnie kojarzą brąz z ziemią, ale także zdrowie, a nawet jałowość. Brązowy jest stabilny, niezawodny i zdrowy.
  • W kulturach wschodnich i azjatyckich brąz jest kolorem żałoby, podczas gdy w Ameryce Łacińskiej brąz zniechęca do sprzedaży i jest ogólnie uważany za dezaprobatę.
  • Kultury Bliskiego Wschodu kojarzą brąz z ziemią i komfortem.

Czarny

  • Świat zachodni postrzega czerń jako kolor ostateczności, śmierci, formalności i żałoby, a także jako kolor kontroli i siły.
  • W kulturach wschodnich i azjatyckich czarny reprezentuje męskość i jest kolorem dla chłopców w Chinach. Symbolizuje również bogactwo, zdrowie i dobrobyt, podczas gdy w Tajlandii i Tybecie czerń jest najbardziej związana ze złem.
  • Podobnie jak na Wschodzie, Ameryka Łacińska kojarzy ten kolor z męskością i żałobą.
  • Co ciekawe, Bliski Wschód używa czerni, aby symbolizować zarówno odrodzenie, jak i żałobę.

Biały

  • W kulturach zachodnich biały jest kolorem czystości i pokoju. Jest to kolor związany ze ślubami, szpitalami i świętością.
  • Jednak we Włoszech oraz kulturach wschodnich i azjatyckich biały jest używany do pogrzebów i reprezentuje sterylność, żałobę, nieszczęście i nieszczęście.
  • W Ameryce Łacińskiej biały ma wiele takich samych skojarzeń jak w Ameryce Północnej i jest związany z czystością i pokojem.
  • Podobnie jak czerń, Bliski Wschód kojarzy zarówno czystość, jak i żałobę z bielą.
Conversion illustration

Kolor i lejek konwersji

Lejek konwersji pomaga wizualizować i rozumieć przepływ, przez który przechodzą Twoi potencjalni klienci po wylądowaniu na twojej stronie i podjęciu pożądanych działań. W swojej najbardziej podstawowej formie lejek konwersji ma cztery główne elementy: świadomość, zainteresowanie, pragnienie i nawrócenie. Rozbijmy ich.:

Świadomość

Świadomość polega na przyciągnięciu potencjalnych klientów lub klientów do twojej witryny. Jest to część lejka, w której wprowadza się je do Twojej marki. Zapoznają się z Twoją firmą, kulturą firmy i misją. To tutaj kolory zaczynają odgrywać główną rolę. Wiedząc, kim jest twoja grupa docelowa i znając emocje, które chcesz wywołać, możesz zacząć planować ogólny schemat kolorów.

Odsetki

Na tym etapie pracujesz nad wzbudzeniem zainteresowania odwiedzających Twoją witrynę. Chcesz poprowadzić ich do dalszej eksploracji i głębszego zanurzenia się w swojej witrynie. Twoja energia powinna koncentrować się na polerowaniu nagłówków, obrazów, banerów i pisaniu przekonującej kopii.

Pożądanie

Teraz, gdy masz ich zainteresowanie, musisz sprawić, że naprawdę chcą Twojego produktu. Zdjęcia witryny, świetne opcje produktów, Filmy i referencje powinny dostarczyć wszystkich niezbędnych informacji, których potrzebują do podjęcia działań.

Na etapie planowania strony internetowej należy wybrać 3 kolory, które będą reprezentować stronę internetową Twojej marki. Ogólną zasadą jest zwykle użycie neutralnych kolorów, takich jak biały lub czarny, na tle i użycie głównego koloru marki, aby uzyskać efekt wizualny. Twój podstawowy kolor marki może być używany do linków, menu nawigacji i nagłówków. Trzeci kolor powinien być akcentem z palety marki, który będzie służył jednemu konkretnemu celowi. To prowadzi nas do czwartego etapu lejka konwersji.

Konwersja

W tym miejscu odwiedzający podejmują pożądane działanie lub innymi słowy, konwertują. Co to jest działanie, zależy wyłącznie od ciebie, ale głównym celem jest, aby podjąć działania. To jest, gdzie trzeba zwrócić ich uwagę na to jedno działanie. Najlepszy sposób? Użyj koloru akcentu ze swojego schematu kolorów. To jest, gdzie chcesz kolor, który uzupełnia Twój schemat kolorów, ale jest wystarczająco kontrastowe, aby przyciągnąć wzrok do głównego wezwania do działania.

Innymi słowy, jeśli Twoja strona używa głównie niebieskiego, to nie ma sensu, aby przycisk wezwania do działania był ciemniejszym odcieniem niebieskiego. Używanie koloru takiego jak pomarańczowy lub odcień żółtego lub czerwonego byłoby bardziej korzystne.

Upewnij się jednak, że twoje wezwanie do działania kontrastuje z kolorami Twojej marki na tyle, aby się wyróżniać, ale nie kolidować. Chcesz, aby przyciągało wzrok ludzi, popychało ich do nawrócenia, a nie odstraszało ich nieatrakcyjną kolorystyką.

Jak zoptymalizować Kolor witryny WordPress

Teraz, gdy wiesz, co oznaczają kolory i jak działa lejek konwersji, omówmy, jak wymyślić schemat kolorów dla Twojej witryny, który jest zoptymalizowany pod kątem konwersji.

Planowanie kolorystyki witryny jest integralną częścią strategii konwersji. Twoje osobiste preferencje kolorystyczne mają pod tym względem bardzo małe znaczenie. Zanim jeszcze wejdziesz na ten etap, powinieneś pamiętać, jaki jest główny cel twojej witryny i kto jest twoją grupą docelową.

W zależności od odbiorców twój schemat kolorów będzie inny, jeśli grupą docelową jest kobieta, a następnie osoba, której grupą docelową są nastolatki i Młodzi dorośli.

Chociaż możesz myśleć, że nie możesz pomylić się z różem, jeśli kierujesz się na kobiety, możesz być zaskoczony, gdy dowiesz się, że około 35% kobiet woli niebieski jako swój ulubiony kolor, a następnie zielony i fioletowy.

Estēe Lauder świetnie wykorzystuje niebieski na swojej stronie internetowej:

The Esteé Lauder website uses blue as a primary color
Strona internetowa Esteé Lauder używa niebieskiego jako podstawowego koloru

Podczas gdy Kolor Pop skierowany jest do tej samej żeńskiej publiczności, ale z fioletowym schematem kolorów:

Colour Pop is targeted to women and uses purple to zero in on its audience.
Colour Pop jest skierowany do kobiet i używa fioletu, aby przyciągnąć uwagę publiczności.

Aby jeszcze bardziej skomplikować sprawy, Jimmy Choo kieruje się również na kobiecą publiczność, ale koncentruje swoje kolory witryny na eleganckim czarno-białym schemacie, który ma zapewnić poczucie luksusu i wyrafinowania.

The Jimmy Choo site definitely targets women but it uses black and white.
Strona Jimmy Choo zdecydowanie atakuje kobiety, ale używa czerni i bieli.

Z drugiej strony mężczyźni preferują niebieski, a następnie zielony i czarny, podczas gdy młodsza populacja preferuje niebieski, zielony i fioletowy, przy czym fioletowy staje się coraz bardziej popularny wśród starszych grup wiekowych.

Dewalt wykonuje świetną robotę dzięki czarno-żółtej kolorystyce; czarny jest trzecim ulubionym kolorem dla mężczyzn i kolorem oznaczającym męskość i siłę. Żółty zapewnia doskonały kontrast kolorów w ich wezwanie do działania i slogan.

 

Dewalt targets men with a black and yellow color scheme.
Dewalt przeznaczony jest dla mężczyzn o czarno-żółtej kolorystyce.

Jak określić najlepszy kolor dla wezwania do działania

Niestety nie ma jednoznacznej odpowiedzi na to pytanie. Jeśli chodzi o przyciski wezwania do działania w Internecie, najczęściej używane są czerwone, pomarańczowe i zielone. Biorąc pod uwagę fakt, że zielony zwykle oznacza GO, nie jest zaskoczeniem, że wielu próbowało przetłumaczyć to na sieć. Jednak szereg badań wykazało, że zielony nie jest optymalnym wyborem dla CTA.

Badanie przeprowadzone przez HubSpot pokazuje, że ich czerwony przycisk przewyższył zielony z 21% wzrostem współczynnika konwersji N.

Podobnie, badanie przeprowadzone przez Dmix pokazuje dramatyczny wzrost konwersji, gdy czerwony przycisk zastąpił zielony, poprawiając konwersje o 34%.

Amazon z kolei pokazuje, że pomarańczowy może być skutecznie używany jako kolor wezwania do działania. Jeśli spojrzysz na ich stronę internetową, zauważysz, że ich najważniejszym wezwaniem do działania jest orange, który jest doskonałym wyborem dla firmy, która chce wyjść jak najbardziej przystępny.

Najlepsze wtyczki WordPress, aby zwiększyć swoje CRO

Ponieważ nie powinieneś sam zajmować się optymalizacją kolorów, zebraliśmy przydatną listę wtyczek, których możesz użyć, aby upewnić się, że Twoje wybory kolorów działają dla ciebie.

  • Forminator

    Jeśli pracujesz z formularzami i chcesz się upewnić, że się konwertują, formularze kontaktowe Forminator, ankiety i quiz builder powinny być twoim pierwszym przystankiem. Jest wysoce konfigurowalny i pozwala szybko i łatwo zintegrować się z różnymi usługami stron trzecich, takimi jak Campaign Monitor, ActiveCampaign, Google Sheets, Zapier, Trello, MailChimp, Aweber i wiele innych.

    Jest to zdecydowanie najprostsza i najlepsza opcja kreatora formularzy dla WordPress.

    Dodatkowo Forminator jest całkowicie Darmowy na WordPress.org! lub uzyskać cały pakiet wtyczek WPMU DEV, usług i wsparcia dla nieograniczonej liczby witryn poprzez uaktualnienie do członkostwa pro.

    Zainteresowany Forminator?

    Szczegóły
  • OptimizePress

    OptimizePress to doskonała tania opcja dla tych z Was, którzy chcą zanurzyć się w tworzeniu niestandardowych stron docelowych. Dzięki OptimizePress możesz tworzyć strony Sprzedaży, strony docelowe, niestandardowe witryny członkostwa i wiele innych. Ich edytor jest łatwy w użyciu i możesz przeglądać wszystkie zmiany podczas ich wprowadzania, co oznacza, że nie musisz odświeżać strony ani podglądać, aby zobaczyć, jak będzie wyglądał projekt. Oferują szeroki wybór gotowych motywów na początek, a także ponad niestandardowe elementy 40, które dodają różne funkcje do twojej witryny.

    OptimizePress oferuje trzy różne pakiety cenowe: Pakiet Core w cenie 97 USD za korzystanie z witryn 3, Pakiet Publisher w cenie 197 USD za korzystanie z witryn 10 i pakiet Pro w cenie 297 USD za korzystanie z witryn 30.

    Zainteresowany OptimizePress?

    Szczegóły
  • ExtraWatch

    ExtraWatch to pomocna wtyczka, która pozwala tworzyć świetne spostrzeżenia CRO i testować pomysły, pokazując odwiedzającym mapy stron i postów WordPress. Dzięki tej wtyczce możesz zoptymalizować swoje strony docelowe, przeglądając mapy ciepła, śledząc kliknięcia, wyświetlając wydajność przycisków i sprawdzając, które elementy Witryny są najbardziej popularne. Oferuje inny wgląd w zachowanie odwiedzającego w czasie rzeczywistym i jest dostępny w planie darmowym i premium.

    Ich plan premium kosztuje jednorazową wypłatę w wysokości 19 USD.

    Zainteresowany ExtraWatch?

    Szczegóły
  • Hustle

    We couldn't round off this list without checking out our own WordPress popup plugin: Hustle!

    Hustle to wyskakujące okienko przechwytywania ołowiu, które oferuje wiele funkcji. Dzięki Hustle możesz tworzyć formularze przechwytywania potencjalnych klientów za pomocą kreatora formularzy, dostosowywać każdy jego aspekt i integrować formularz z różnymi wiodącymi usługami poczty e-mail i autorespondera.

    Wtyczka oferuje również ładną kolekcję motywów jako punkt wyjścia i możesz zaprojektować również własne. Jedną z jego głównych zalet jest technologia exit-intent, która rozpoznaje, kiedy odwiedzający ma opuścić Twoją witrynę i wyświetla wyskakujący formularz w tym właśnie momencie.

    Hustle zawiera również trzy przydatne wskaźniki, które pokazują statystyki dotyczące liczby wyświetlanych i przesyłanych formularzy oraz współczynników konwersji.

    Interesuje Cię Hustle?

    Szczegóły
  • Q2w3 Fixed Widget

    Q2w3 Fixed Widget to wtyczka, która daje możliwość oznaczenia dowolnego widgetu jako” fixed ” widget na pasku bocznym. Oznacza to, że bez względu na to, jak daleko w dół użytkownik przewija, widget zawsze pozostanie widoczny, co może znacznie zwiększyć współczynnik konwersji na najważniejsze wezwanie do działania.

    Ta wtyczka jest darmowa.

    Zainteresowany Q2w3 Fixed Widget?

    Szczegóły

Wrapping Up

Dużo dziś omówiliśmy. Głównym wyjściem na temat optymalizacji kolorów, o którym powinieneś wiedzieć, jest to, że nie ma jednoznacznej odpowiedzi. Każda strona jest unikalna i jako taka, każda strona będzie miała unikalny proces optymalizacji współczynnika konwersji.

Jako punkt wyjścia możesz jednak zawęzić potencjalne kolory przycisków wezwania do działania do kilku opcji zgodnych z Twoim motywem lub prezentujących znaczący kontrast. Unikaj wybierania kolorów, które mogą mieć negatywne konotacje dla odbiorców docelowych. I nie zapomnij przetestować, przetestować i przetestować jeszcze trochę i wybrać zwycięski kolor na podstawie tych wyników.

Pamiętaj, że sam kolor nie jest magicznym rozwiązaniem. Wybór koloru jest tylko jedną z części strategii marketingowej, więc pamiętaj, aby uzupełnić go gwiazdorską kopią i ładnym designem. W przeciwnym razie twoje wybory kolorów nie będą miały większego znaczenia.

Jakie są Twoje ulubione techniki CRO? Który kolor najlepiej pasuje do ciebie? Daj nam znać w komentarzach poniżej.

Tagi:

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd “nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

9 Najlepsze Darmowe Wtyczki WordPress Author Bio Box

W artykule: 1. Simple Author Box2. Branda3. Autor postu WP4. Author Bio…