Uwaga: Poniższy artykuł pomoże Ci w: Schematy kolorów witryn internetowych i najlepsze generatory schematów kolorów
Jaka jest jedna z pierwszych rzeczy, które przychodzą Ci do głowy, gdy myślisz o kultowej marce, takiej jak Pepsi czy T-Mobile? Najprawdopodobniej twój umysł jest natychmiast wypełniony kolorem niebieskim lub różowym. Kultowe marki mają opanowali użycie koloru w swoim brandingu aż do nauki sukcesu. Jeśli budujesz sklep internetowy, najważniejszym zastosowaniem twojej palety kolorów jest projekt witryny.
Twój witryny e-commerce Paleta kolorów i ogólny branding muszą pozostać w pamięci klientów na długo po tym, jak opuszczą Twoją witrynę. W świecie zakupów online masz dużą konkurencję — coś tak prostego jak wybór koloru może wpłynąć na konwersję. Przejdźmy więc przez to, co trzeba zrobić, aby stworzyć schematy kolorów witryny, które nie tylko konwertują, ale także ugruntowują Twoją markę w Twojej branży na długi czas.
Jak kolor wpływa na klientów?
Kolor jest o wiele potężniejszy niż zwykła estetyka – kolory, które wybierzesz dla marki swojej firmy i sklepu internetowego, mogą w rzeczywistości wpłynąć na zachowanie klienta i to, czy w ogóle chce robić u ciebie zakupy. Podzielmy ten efekt na trzy główne elementy: reakcje emocjonalne, zachowania zakupowe i dane demograficzne.
Emocjonalne odpowiedzi
Stwierdzono, że różne kolory wywołują określone reakcje emocjonalne, gdy są obserwowane przez ludzi. Jest to nauka o psychologii kolorów, która zajmuje się badaniem wpływu kolorów na sposób, w jaki myślimy i czujemy. Coś tak prostego jak kolor może bezpośrednio wpłynąć na to, jak lubimy osobę, którą właśnie poznaliśmy, jak czujemy się w określonym miejscu i oczywiście na to, jak robimy zakupy. Chociaż może się to różnić w zależności od wielu czynników, niektóre kolory zwykle kojarzą się z emocjami, takimi jak:
- Czerwonydla podniecenia, miłości, pasji, energii i gniewu.
- Pomarańczowyza życzliwość, entuzjazm, kreatywność i młodość.
- Żółtyza młodość, optymizm, radość i spontaniczność.
- Zielonyza bogactwo, zdrowie, spokój, naturę i stabilność.
- Niebieskio zaufanie, bezpieczeństwo, stabilność, pokój i spokój.
Źródło: Firma Logo
Zachowanie zakupowe
Odgałęzieniem emocji jest zachowanie, a dokładniej w tym przypadku zachowanie zakupowe. Tak jak różne kolory mogą wpływać na określone emocje, emocje te mogą wpływać na pożądane zachowanie i przyciągać określone rodzaje kupujących.
Na przykład mocno nasycone kolory, takie jak czerwony, pomarańczowy i czarny, zwykle przyciągają impulsywnych klientów, a nawet mogą pobudzać apetyt – pomyśl o fast foodach i wyprzedażach. Zobaczysz te kolory w firmach takich jak Coca-Cola, McDonalds i Netflix, które budują stymulującą energię, przyciągają uwagę i przyciągają impulsywne zakupy.
Na drugim końcu spektrum są mniej szorstkie kolory, takie jak biały, żółty i niebieski, które zwykle przyciągają kupujących z ograniczonym budżetem – przychodzą na myśl banki i duże domy towarowe. Best Buy używa w swoim marketingu zarówno koloru żółtego, jak i niebieskiego, ponieważ ich działalność często wiąże się z oszczędzaniem pieniędzy na dużych biletach. Niebieski jest wszędzie w mediach społecznościowych, w tym Facebook, Twitteri LinkedIn – z których wszystkie są bezpłatnymi usługami (w większości).
Źródło: KISSmetrics
Demografia
Innym ważnym czynnikiem wpływającym na to, jak kolory wpływają na klientów, jest sam klient; w szczególności ich dane demograficzne. Niektóre dane demograficzne, od płci po lokalizację fizyczną, zwykle lepiej reagują na określone kolory. Na przykład wykazano, że istnieje podział na płeć w zależności od koloru — mężczyźni preferują jaśniejsze, bardziej nasycone kolory, podczas gdy kobiety wolą bardziej miękkie, mniej nasycone kolory.
Poza płcią jest kraj i kultura klienta; kolory mogą mieć bardzo różne znaczenia w różnych krajach. Jeśli prowadzisz interesy w kraju, w którym dominuje kultura, której nie znasz, ważne jest, aby dowiedzieć się, jakie kolory oznaczają w tej kulturze. Na przykład, podczas gdy czerwień jest kolorem pozytywnym w krajach takich jak Chiny i Indie, w Afryce Południowej jest to kolor żałoby. Co więcej, kolor fioletowy może reprezentować bogactwo i władzę w większości krajów wschodnich i zachodnich, ale niektóre kraje w Europie, takie jak Wielka Brytania i Włochy, kojarzą go ze śmiercią i żałobą.
Jak wybrać schemat kolorów witryny
Teraz, gdy rozumiesz podstawową psychologię kolorów, możesz zacząć wybierać kolory, których chcesz użyć w witrynie swojej firmy. Ale to nie jest tak proste, jak wybranie czerwieni, ponieważ chcesz, aby Twoja marka reprezentowała energię; paleta składa się z kilku rodzajów kolorów, z których wszystkie mają znaczenie zarówno psychologiczne, jak i biznesowe.
1. Przeanalizuj swoją branżę
Zanim wybierzesz kolor, musisz najpierw spojrzeć na swoją branżę jako całość i swoich konkurentów. Poświęć trochę czasu na zbadanie rynku, aby dowiedzieć się, jakie rodzaje palet kolorów są najczęstsze i odnoszą największe sukcesy w branży, w której prowadzisz działalność. Ale chcesz też unikać używania kolorów, których już używa konkurencja, aby nie wprowadzać w błąd marki ani nie być na ryzyko skopiowania konkurencji. Chcesz wyróżnić swoją markę, ale też nie wyróżniać się na tyle, by dezorientować kupujących, którzy robią zakupy w Twojej branży.
Zamiast kopiować konkurencję, czerp inspirację z innych firm, które odnoszą sukcesy dzięki wybranym przez siebie paletom kolorów. Możesz nawet wykorzystać te kolory, aby wpłynąć na to, jak klienci myślą o Twojej firmie. Na przykład, jeśli odróżniasz się od konkurencji tym, że są przestarzałe w porównaniu z Twoją firmą i używają przygaszonego niebieskiego koloru, rozważ użycie jaśniejszego niebieskiego koloru, aby pokazać, że jesteś świeży.
2. Zacznij od swojego logo i koloru podstawowego
Teraz, gdy rozumiesz zasady gry, musisz zacząć od najważniejszego koloru: koloru bazowego. Jeśli masz już ustalone logo, to Twój kolor bazowy będzie głównym kolorem użytym w logo, aby zachować spójność marki. Jeśli jednak nie masz jeszcze logo, pierwszym krokiem jest wybranie głównego koloru, który będzie używany w całym brandingu, abyś mógł następnie stworzyć logo swojej firmy.
Korzystając z tego, co omówiliśmy, prawdopodobnie już rozumiesz, że nie jest to tak proste, jak wybranie ulubionego koloru. Najpierw pomyśl o tzw emocja lub zachowanie które chcesz wywołać u klientów odwiedzających Twoją witrynę. Łatwym sposobem na to jest wypisanie słów, które mają być kojarzone z Twoją firmą. Na przykład, jeśli Twoja strona internetowa reprezentuje Twoje studio jogi, możesz wpisać „spokój, spokój, spokój, równowaga”. Połącz te słowa z odpowiadającymi im kolorami i wybierz kolor pasujący do Twojej firmy.
Następnie pomyśl o swoim grupa docelowa. Jakie są Twoje docelowe grupy demograficzne? Skorzystaj z informacji dotyczących płci, wieku, kraju klienta i innych informacji, aby wybrać kolor. Jednak rozsądnie jest nie bawić się stereotypami (takimi jak dziewczyny zawsze lubią różowy), aby uniknąć stereotypów i wyróżnić się na tle innych firm.
Na koniec zastanów się nad przemysł w którym się znajdujesz oraz zachowania i emocje z tym związane. Jeśli Twoja firma opiera się na niedrogiej odzieży, przyjrzyj się kolorom, które przyciągają kupujących z ograniczonym budżetem. Lub, jeśli Twoja firma zajmuje się bardziej luksusową modą, zdecyduj się na kolor kojarzony z luksusowymi klientami.
Po wybraniu podstawowego koloru głównego musisz określić dokładny cień lub odcień chcesz mieć ten kolor. To, że na przykład wybrałeś żółty jako kolor, nie oznacza, że neonowa żółć może być najlepsza dla Twojej firmy; pastelowy żółty może mieć większy sens w twojej dziedzinie. Różne odcienie koloru mogą również wpływać na emocje, na przykład jaśniejszy niebieski jest bardziej zabawny niż poważny ciemnoniebieski. Wróć do grupy docelowej, pożądanych zachowań i emocji, aby określić odcień, który ma największy sens.
3. Stwórz angażującą paletę kolorów
Po wybraniu koloru podstawowego możesz teraz wybrać kolory akcentujące, które dobrze łączą się i poprawiają wizerunek Twojej marki. Stworzenie działającej palety opiera się na teorii kolorów, która obejmuje wszystkie koncepcje stojące za tym, jak kolory łączą się ze sobą i działają obok siebie. Zazwyczaj opiera się to na kole kolorów, które wizualizuje, w jaki sposób kolory odnoszą się do siebie na różne sposoby. Dzisiaj omówimy dwa główne sposoby, w jakie kolory mogą odnosić się do siebie, o których powinieneś wiedzieć: kolory analogiczne i kolory dopełniające.
Analogiczne kolory to grupy trzech kolorów, które leżą obok siebie na kole kolorów. Na przykład niebieski, niebieski fiolet i fiolet są kolorami analogicznymi. Paleta wykorzystująca analogiczne kolory zazwyczaj tworzy bogaty, monochromatyczny, uproszczony wygląd, który opiera się na jednym typie koloru z różnymi odcieniami i odcieniami.
Kolory dopełniające to dowolne dwa kolory, które leżą naprzeciw siebie na kole kolorów. Typowymi przykładami tego są czerwony i zielony, żółty i fioletowy lub niebieski i pomarańczowy. Jak sama nazwa wskazuje, kolory uzupełniające mają tendencję do wzajemnego uzupełniania się i prawie zawsze gwarantują dobry wygląd, gdy są używane razem. Większość dynamicznych palet kolorów witryn wykorzystuje uzupełniające się kolory, aby dodać kontrastu i popu, a także uniknąć mieszania się wszystkich kolorów.
Większość palet kolorów będzie wykorzystywać mieszankę kolorów analogicznych i uzupełniających, ale niektóre projekty witryn mogą wykorzystywać tylko jeden typ dla uzyskania pożądanego efektu. Pamiętaj, że nie chcesz używać zbyt wielu kolorów, w przeciwnym razie możesz zaryzykować zaprojektowanie witryny, która będzie zbyt zatłoczona i przytłaczająca dla klientów. Chcesz zaprojektować paletę, która jest przyjemna dla oczu klienta i nie odstrasza go do mniej rozpraszającej strony.
Jednak jednocześnie nie chcesz używać zbyt małej ilości kolorów; może to wyglądać na nijakie i nieoryginalne. Ważne jest, aby uzyskać idealną równowagę między wariantami kolorów, która jest odpowiednia dla Twojej firmy i celów.
4. Rozprowadź kolory główne i akcentujące
Chociaż wybór kolorów sam w sobie jest kluczowym aspektem projektowania stron internetowych, wszystko to składa się na dystrybucję kolorów. Teraz nadszedł czas, aby zastosować wybrane kolory do elementów projektu witryny.
Twój kolor bazowy powinien być używany w miejscach Twojej witryny, na które chcesz, aby użytkownicy zwracali największą uwagę. Zwykle obejmuje to logo, karty menu, tytuły lub nagłówki oraz inne główne przyciski.
Kolory akcentujące należy następnie zastosować w obszarach o wysokim kontraście, aby wyróżnić niektóre elementy. Obejmą one aktualne zakładki menu, napisy, przyciski wezwań do działania oraz podświetlanie informacji drugorzędnych. Pamiętaj, że wybór koloru przycisków CTA jest sam w sobie kluczowy; powinny używać kolorów, które zachęcają użytkowników do kliknięcia i najbardziej wyskakują z wybranej palety kolorów. Na przykład, jeśli używasz palety z kolorem niebieskim i pomarańczowym, a twoim kolorem bazowym jest niebieski, wezwanie do działania powinno być pomarańczowe.
Najlepsze generatory schematów kolorów stron internetowych
Chociaż możesz poświęcić trochę czasu na przestudiowanie teorii kolorów i wybranie każdego koloru z palety jeden po drugim, łatwiejszym i szybszym sposobem na zbudowanie działającej palety kolorów jest użycie generatora schematów kolorów. Wybraliśmy pięć naszych ulubionych generatorów, które mogą Ci pomóc w kolorowej podróży.
Adobe Color CC
Stworzony przez Adobe, firmę produkującą oprogramowanie do projektowania, Adobe Color CC to generator schematów kolorów, który integruje się bezpośrednio ze wszystkimi produktami Adobe. Korzystanie z serwisu jest bezpłatne bez zakładania konta; jeśli jednak chcesz zapisać którąkolwiek z wygenerowanych palet, musisz utworzyć konto Creative Cloud (które możesz już mieć, jeśli korzystasz z programów takich jak Photoshop).
Program Adobe Color CC umożliwia tworzenie palety kolorów za pomocą koła kolorów, wyodrębnianie palety z obrazu, który można przesłać, oraz eksplorowanie popularnych palet kolorów tworzonych przez innych użytkowników. Jednym z najlepszych aspektów tej witryny jest sekcja Trendy, która pokazuje, jakie rodzaje palet kolorów są obecnie popularne w określonej branży, takiej jak moda, architektura lub projektowanie gier.
Colormind.io
Colormind to darmowy generator schematów kolorów stron internetowych, bez konta, który umożliwia generowanie losowych palet kolorów do wykorzystania na stronie internetowej. Prosty interfejs umożliwia również zastosowanie palety kolorów do przykładowej witryny typu bootstrap, zastosowanie palety do przykładowego pulpitu nawigacyjnego lub wyodrębnienie palety z obrazu.
Aby użyć Colormind, po prostu wygeneruj nową paletę kolorów, wybierz schemat zawierający jeden lub kilka kolorów, które naprawdę lubisz, i zablokuj te kolory, aby zachować je w palecie. Następnie możesz generować nowe kolory pasujące do zablokowanych kolorów, aż znajdziesz wszystkie kolory, z których jesteś zadowolony.
Coolors.co
Coolors to darmowy generator palet kolorów na stronie internetowej, bez konieczności korzystania z konta; możesz jednak utworzyć konto, aby zapisać swoje ulubione kolory i palety do wykorzystania w przyszłości lub odniesienia. Coolors daje możliwość generowania kolorów, eksplorowania popularnych palet, wybierania palety ze zdjęcia, tworzenia kolażu przy użyciu palety, tworzenia palety gradientów/gradientów, sprawdzania kontrastu i wielu innych.
Aby wygenerować paletę, przejdź do ich generatora, który utworzy losową paletę, którą możesz zmienić, naciskając spację. Podobnie jak Colormind, możesz zablokować kolor, aby zachować go w palecie i wygenerować nowe kolory, aby do niego pasowały. Jedną z przydatnych funkcji Coolors jest narzędzie do ślepoty barw, które pozwala zobaczyć, jak Twoja paleta będzie wyglądać dla osób z różnymi formami ślepoty barw – jest to szczególnie przydatne, aby Twoja witryna była dostępna.
Kolorowanie dla daltonistów
Jeszcze bardziej zagłębiając się w dostępne projekty, jest Coloring for Colorblindness, bezpłatna strona internetowa stworzona przez Davida Nicholsa, absolwenta matematyki z University of Connecticut. Color for Colorblindness automatycznie generuje paletę kolorów i pokazuje przykłady obok siebie, jak ta paleta będzie wyglądać dla osób z różnymi rodzajami daltonizmu.
Witryna idzie jeszcze dalej, aby pomóc w projektowaniu z myślą o ułatwieniach dostępu, podając przykłady ośmiu par kontrastujących kolorów, które zachowują kontrast dla osób z daltonizmem. Możesz kliknąć dowolną z tych par, aby załadować je do narzędzia sekcji palety kolorów i użyć ich do stworzenia własnej palety.
Paleta materiałów
Oparte na „Materiałowy projekt” Google Paleta kolorów, Material Palette pomaga użytkownikom generować uproszczone schematy kolorów do wykorzystania w minimalistycznych witrynach internetowych i aplikacjach. Witryna jest bezpłatna i nie ma możliwości założenia konta; aby zapisać swoją paletę, możesz opublikować ją na Twitterze lub pobrać w różnych formatach plików.
Korzystając z palety materiałów, możesz wybrać jeden z 19 kolorów na stronie głównej, który ci się podoba. Następnie witryna wygeneruje paletę przy użyciu tych dwóch kolorów i zademonstruje, jak paleta wygląda w akcji w interfejsie aplikacji.
Jednym z najbardziej użytecznych aspektów tego generatora jest sugestia, jak używać kolorów w palecie. Na przykład otrzymasz paletę z oznaczeniami koloru podstawowego, podstawowego koloru tekstu, dodatkowego koloru tekstu, koloru ikony, koloru separatora i innych.
Podsumowanie
Tak jak każda inna decyzja biznesowa, którą podejmujesz, paleta kolorów wybrana dla Twojej witryny ma kluczowe znaczenie dla osiągnięcia sukcesu. Dzieje się tak, ponieważ paleta kolorów Twojego sklepu internetowego jest czymś, co powinno trwać tak długo, jak Twoja firma i będzie wykorzystywane we wszystkich formach marketingu oprócz projektu Twojej witryny. Budowanie marki nie jest łatwym procesem, dlatego ważne jest, aby przemyśleć, w jaki sposób tworzysz tożsamość swojej firmy. Jeśli proces ten wydaje się zniechęcający, profesjonalny grafik może również pomóc w stworzeniu idealnego wyglądu Twojej witryny.
