Kolory wybrane do projektowania stron internetowych wywo\u0142uj\u0105 r\u00f3\u017cne nastroje u u\u017cytkownika, o czym ten nie zdaje sobie nawet sprawy. Dobry dob\u00f3r barw to najbardziej bezpo\u015bredni spos\u00f3b na wywo\u0142anie dobrego wra\u017cenia, a estetyczne po\u0142\u0105czenie kolor\u00f3w nadaje stronie internetowej jednolity i dopracowany wygl\u0105d.<\/p>\n
W internecie mo\u017cna znale\u017a\u0107 mn\u00f3stwo narz\u0119dzi pomagaj\u0105cych w wygenerowaniu \u0142adnej palety kolor\u00f3w do strony internetowej. Istnieje wiele metod wyboru kombinacji kolor\u00f3w, ale przyjrzymy si\u0119 tym naj\u0142atwiejszym, mo\u017cliwym do zrealizowania przez ka\u017cdego.<\/span><\/p>\n<\/div>\n Pierwsz\u0105 metod\u0105 jest zbudowanie od podstaw palety kolor\u00f3w do strony internetowej. Oczywi\u015bcie s\u0105 do tego odpowiednie narz\u0119dzia online, a jest ich naprawd\u0119 mn\u00f3stwo. Oto kilka z nich:<\/p>\n Jak wida\u0107 jest w czym przebiera\u0107. Praktycznie ka\u017cde z tych narz\u0119dzi polega na doborze jednego koloru g\u0142\u00f3wnego, a algorytmy dobieraj\u0105 pozosta\u0142e. Tylko jak wybra\u0107 kolor g\u0142\u00f3wny? W 32-bitowej palecie mamy przecie\u017c a\u017c 4,294,967,296 kolor\u00f3w. Tutaj mo\u017cna si\u0119 kierowa\u0107 w\u0142asnym gustem i wybra\u0107 pasuj\u0105cy nam odcie\u0144 ulubionego koloru lub te\u017c posi\u0142kowa\u0107 si\u0119 konkurencyjnymi stronami internetowymi. Nic nie stoi na przeszkodzie by zobaczy\u0107 jak wygl\u0105daj\u0105 barwy na stronie www bardziej prominentnych, rozwini\u0119tych firm. Oczywi\u015bcie jest to p\u00f3j\u015bcie na \u0142atwizn\u0119, ale w wielu przypadkach si\u0119 sprawdza. Na stronie BrandColors<\/a> mo\u017cna w \u0142atwy spos\u00f3b przejrze\u0107 dominuj\u0105ce barwy najwi\u0119kszych firm tego \u015bwiata.<\/p>\n Je\u017celi jednak podgl\u0105danie konkurent\u00f3w nie przyniesie pozytywnego efektu (niekt\u00f3re strony www potrafi\u0105 by\u0107 naprawd\u0119 paskudne), to z pomoc\u0105 przychodz\u0105 dwa serwisy przeznaczone dla designer\u00f3w, kt\u00f3rzy chwal\u0105 si\u0119 swoimi pracami:<\/p>\n Zdj\u0119cia mog\u0105 by\u0107 doskona\u0142ym \u017ar\u00f3d\u0142em inspiracji, je\u015bli chodzi o wyb\u00f3r schematu kolor\u00f3w. Zw\u0142aszcza gdy wiemy, \u017ce dane zdj\u0119cie b\u0119dzie nasz\u0105 g\u0142\u00f3wn\u0105 grafik\u0105, widoczn\u0105 od razu na g\u00f3rze po wczytaniu strony internetowej.<\/p>\n Fotografie cz\u0119sto stanowi\u0105 fundament dla reszty kolor\u00f3w na stronie internetowej. Zdecydowanie \u0142atwiej jest dobra\u0107 kolory do zdj\u0119cia ni\u017c zrobi\u0107 to na odwr\u00f3t - szuka\u0107 odpowiedniego zdj\u0119cia do ju\u017c wybranych kolor\u00f3w. Dlaczego \u0142atwiej? Ano, podobnie jak w przypadku Metody nr 1, r\u00f3wnie\u017c istnieje wiele narz\u0119dzi online, kt\u00f3re stworz\u0105 pasuj\u0105c\u0105 palet\u0119 kolor\u00f3w na podstawie przes\u0142anego zdj\u0119cia:<\/p>\n Zapo\u017cyczenie kolor\u00f3w ze zdj\u0119cia do reszty strony internetowej sprawi, \u017ce wszystkie elementy b\u0119d\u0105 si\u0119 p\u0142ynnie przenika\u0107 i tworzy\u0107 jednolit\u0105 to\u017csamo\u015b\u0107 wizualn\u0105. Wra\u017cenie sp\u00f3jno\u015bci b\u0119dzie pot\u0119gowa\u0107 \u0142adne, przyci\u0105gaj\u0105ce wzrok zdj\u0119cie, na kt\u00f3rym opiera si\u0119 reszta kolor\u00f3w strony internetowej.<\/p>\n Je\u017celi jednak nie ufamy naszemu gustowi, zdj\u0119ciom czy konkurencji, to pozostaje trzecia opcja - psychologia kolor\u00f3w. Pod tym szerokim poj\u0119ciem kryj\u0105 si\u0119 m.in. nasze skojarzenia z danymi barwami. R\u00f3\u017cne kolory b\u0119d\u0105 wysy\u0142a\u0107 r\u00f3\u017cne wiadomo\u015bci do u\u017cytkownik\u00f3w, zmieniaj\u0105c ich postrzeganie strony internetowej, nawet je\u015bli nie by\u0142o to zamierzone. Je\u017celi wi\u0119c prowadzimy biuro podr\u00f3\u017cy, powinni\u015bmy u\u017cy\u0107 wybra\u0107 zielony lub \u017c\u00f3\u0142ty. Ten pierwszy kojarzy si\u0119 oczywi\u015bcie z przyrod\u0105, a drugi ze S\u0142o\u0144cem. Dla biura podr\u00f3\u017cy pasuje jak ula\u0142. Id\u0105c tym tropem, odpowiedni b\u0119dzie tak\u017ce kolor niebieski - w zale\u017cno\u015bci od odcienia wywo\u0142uj\u0105cy skojarzenia z wod\u0105 lub niebem. To jednak by\u0142o proste... zbyt proste. Psychologia kolor\u00f3w opiera si\u0119 bowiem tak\u017ce na skojarzeniach, o kt\u00f3rych nie mamy poj\u0119cia, np:<\/p>\n Na pierwszy rzut oka nie brzmi to zbyt wiarygodnie, ale nauka wykaza\u0142a, \u017ce czerwony mo\u017ce przyspieszy\u0107 bicie serca, podczas gdy niebieski daje efekt uspokajaj\u0105cy. Przyk\u0142adowo, w 2000 roku Glasgow wprowadzi\u0142o niebieskie o\u015bwietlenie uliczne, aby poprawi\u0107 krajobraz miasta, co przypadkowo doprowadzi\u0142o do zauwa\u017calnego zmniejszenia liczby przest\u0119pstw na obszarach o\u015bwietlonych przez niebieskie latarnie. Inny przyk\u0142ad - tokijska linia kolejowa Yamanote zdecydowa\u0142a si\u0119 na zainstalowanie niebieskich \u015bwiate\u0142 na ko\u0144cach peron\u00f3w kolejowych, aby zmniejszy\u0107 liczb\u0119 samob\u00f3jstw. W rezultacie liczba samob\u00f3jstw na tych stacjach spad\u0142a a\u017c o 74%.<\/p>\n To prawdopodobnie wyja\u015bnia, dlaczego wi\u0119kszo\u015b\u0107 marek medycznych i farmaceutycznych wybiera kolor niebieski jako podstawowy kolor.<\/p>\n Jest to o tyle wa\u017cne, \u017ce bardzo wielu u\u017cytkownik\u00f3w podejmuje decyzje zakupowe lub biznesowe w oparciu w\u0142a\u015bnie o kolory i te pod\u015bwiadome skojarzenia. Co wi\u0119cej - wed\u0142ug bada\u0144 a\u017c 90% szybkich zakup\u00f3w wynika wy\u0142\u0105cznie z postrzegania kolor\u00f3w. W tym wypadku sprawdza si\u0119 regu\u0142a, \u017ce pierwsze wra\u017cenie jest najwa\u017cniejsze. Zw\u0142aszcza, \u017ce nie trwa ono d\u0142ugo. Wed\u0142ug innych bada\u0144, przeci\u0119tne utrzymanie uwagi przez u\u017cytkownika internetu trwa... 15 sekund.<\/p>\n W psychologii kolor\u00f3w barwa jest narz\u0119dziem do wywo\u0142ania okre\u015blonego efektu. Je\u015bli celem strony internetowej jest co\u015b sprzeda\u0107, warto wybra\u0107 kolory kolory, kt\u00f3re wzbudz\u0105 odpowiednie emocje u odwiedzaj\u0105cych witryn\u0119.<\/p>\n Badacze rynku i mened\u017cerowie marek bardzo cz\u0119sto wykorzystuj\u0105 psychologi\u0119 kolor\u00f3w. Przyk\u0142ady tego w obejmuj\u0105 restauracje, kt\u00f3re zwykle s\u0105 czerwone i pomara\u0144czowe, banki i instytucje finansowe maj\u0105 odcienie niebieskiego, a produkty luksusowe s\u0105 zwykle pakowane na czarno.<\/p>\n By nie by\u0142o zbyt kolorowo<\/em>, w gr\u0119 wchodz\u0105 r\u00f3wnie\u017c inne zmienne, kt\u00f3re sprawiaj\u0105, \u017ce odwiedzaj\u0105cy stron\u0119 internetow\u0105 inaczej reaguje na barwy. Bardzo wiele zale\u017cy od p\u0142ci oraz wieku odbiorcy. Dlatego wa\u017cne jest by podczas tworzenia strony internetowej wiedzie\u0107 jaka jest jej grupa docelowa.<\/p>\n W pewnym badaniu prawie 2000 m\u0119\u017cczyzn i kobiet zapytano, czy wol\u0105 fioletowy, niebieski, zielony, \u017c\u00f3\u0142ty, pomara\u0144czowy, czerwony czy r\u00f3\u017cowy. 42% m\u0119\u017cczyzn stwierdzi\u0142o, \u017ce ich ulubionym kolorem jest niebieski, a nast\u0119pnie zielony (25%) i fioletowy (12%). Kobiety twierdzi\u0142y r\u00f3wnie\u017c, \u017ce preferowanym kolorem jest niebieski (29%), a nast\u0119pnie fioletowy (27%) i zielony (19%). R\u00f3\u017cnica jest subtelna, ale mo\u017ce mie\u0107 znacz\u0105cy wp\u0142yw na sukces strony internetowej.<\/p>\n Wa\u017cne jest tak\u017ce by wzi\u0105\u0107 pod uwag\u0119 najmniej ulubione kolory. Oczywi\u015bcie r\u00f3wnie\u017c to przebadano i wychodzi na to, \u017ce niezale\u017cnie od p\u0142ci, nie lubimy br\u0105zowego i pomara\u0144czowego. 17% kobiet wybra\u0142o tak\u017ce kolor szary w swoim rankingu TOP 3 najmniej ulubionych kolor\u00f3w.<\/p>\n Trudno jednak jednoznacznie stwierdzi\u0107, kt\u00f3re kolory si\u0119 w og\u00f3le nie nadaj\u0105 do naszego projektu strony internetowej. Wiele zale\u017cy od regionu (w Polsce m\u0119\u017cczy\u017ani nie przepadaj\u0105 za r\u00f3\u017cem, chocia\u017c we W\u0142oszech jest uznawany za m\u0119ski), a tak\u017ce od trend\u00f3w czy indywidualnych preferencji. Dzi\u015b popularne mog\u0105 by\u0107 pastele, a jutro \u017cywe i jaskrawe barwy.<\/p>\n Niebieski, czerwony i zielony to trzy dominuj\u0105ce kolory, kt\u00f3re pojawiaj\u0105 si\u0119 w prawie ka\u017cdej bran\u017cy i mo\u017cna je uzna\u0107 jako \"bezpieczne\".<\/p>\n Jest jednak jeden wyj\u0105tek, kt\u00f3ry dotyczy koloru niebieskiego. Wed\u0142ug badaczy \u017cywno\u015bci, w czasach gdy ludzie szukali jedzenia, nauczyli si\u0119 unika\u0107 toksycznej lub zepsutej \u017cywno\u015bci, kt\u00f3ra cz\u0119sto by\u0142a niebieskia, czarne lub fioletowa. Gdy uczestnikom badania podano jedzenie barwione na niebiesko, tracili apetyt.<\/p>\n Chocia\u017c nie ma twardej i szybkiej regu\u0142y, to im wi\u0119cej kolor\u00f3w u\u017cywasz, tym trudniej jest stworzy\u0107 jednolity projekt. Projektanci wn\u0119trz i mody maj\u0105 regu\u0142\u0119 60-30-10, wed\u0142ug kt\u00f3rej trzy kolory powinny by\u0107 u\u017cywane w r\u00f3\u017cnym stopniu (60%, 30%, 10%), aby stworzy\u0107 idealn\u0105 harmoni\u0119. Trzy kolory na stronie www s\u0105 tak\u017ce odpowiednim balansem pomi\u0119dzy szaroburo\u015bci\u0105 a pstrokato\u015bci\u0105.<\/p>\n Dobrym przyk\u0142adem tej zasady w praktyce jest garnitur m\u0119ski: marynarka i spodnie sk\u0142adaj\u0105 si\u0119 na oko\u0142o 60% jego wygl\u0105du, koszula stanowi kolejne 30%, a krawat 10%.<\/p>\n Grunt to mie\u0107 kolor podstawowy, dominuj\u0105cy, do kt\u00f3rego zostan\u0105 dobrane pozosta\u0142e barwy. Mog\u0105 to za nas za\u0142atwi\u0107 wypunktowane narz\u0119dzia w metodzie nr 1 powy\u017cej. Mo\u017cemy te\u017c zrobi\u0107 to samodzielnie, korzystaj\u0105c z licz\u0105cej kilkaset lat teorii kolor\u00f3w<\/a>, kt\u00f3rej podstawowe zasady mo\u017cna znale\u017a\u0107 m.in. w zapiskach Leonarda da Vinci. Dobrym punktem wyj\u015bcia jest triadyczny schemat kolor\u00f3w, kt\u00f3ry obejmuje trzy barwy rozmieszczone r\u00f3wnomiernie wok\u00f3\u0142 ko\u0142a kolor\u00f3w.<\/p>\n Gdy jednak b\u0119dzie nas kusi\u0107 kolejny, czwarty kolor, warto wtedy skorzysta\u0107 z odcieni ju\u017c wybranej barwy. Efektem b\u0119dzie ujednolicenie projektu strony internetowej bez potrzeby stosowania czwartego lub pi\u0105tego koloru. Wykluczamy tym samym mo\u017cliwo\u015b\u0107, \u017ce dodatkowy kolor b\u0119dzie si\u0119 gryz\u0142 z istniej\u0105cym schematem kolor\u00f3w.<\/p>\n Odpowied\u017a wydaje si\u0119 prosta - czarny. Ca\u0142e wieki czytania ksi\u0105\u017cek przyzwyczai\u0142y ludzko\u015b\u0107 do czarnego tekstu na bia\u0142ym tle. Jednak to co postrzegamy jako czarny, jest zazwyczaj bardzo ciemnym szarym, mocno zbli\u017conym do czarnego. Tyczy si\u0119 to nie tylko ksi\u0105\u017cek, ale tak\u017ce stron internetowych. Wystarczy przejrze\u0107 jakikolwiek serwis informacyjny z du\u017c\u0105 ilo\u015bci\u0105 tekstu. Rzadko kiedy zobaczymy tam czyst\u0105 czer\u0144.<\/p>\n Prawdziwa czer\u0144 cz\u0119sto wizualnie nie pasuje do reszty strony www. Wygl\u0105da jakby odstawa\u0142a jako\u015bci\u0105 i gryz\u0142a si\u0119 pozosta\u0142ymi kolorami. Zw\u0142aszcza je\u017celi tyczy si\u0119 to tekstu na bia\u0142ym tle. Rozwi\u0105zaniem jest u\u017cycie - tak, to teraz oczywiste - bardzo ciemnego szarego. Dla wi\u0119kszo\u015bci niewra\u017cliwych b\u0119dzie to nadal czarny, ale znacznie lepiej wkomponowany w ca\u0142o\u015b\u0107 strony internetowej. Tymczasem czyst\u0105 czer\u0144 warto zachowa\u0107 na nag\u0142\u00f3wki. Dzi\u0119ki temu b\u0119d\u0105 si\u0119 bardziej wyr\u00f3\u017cnia\u0142y na tle standardowego tekstu. Je\u017celi ju\u017c jeste\u015bmy przy kolorze czarnym to...<\/p>\n Jest nim kolor bia\u0142y. Jest to najbardziej neutralny kolor i idealnie kontrastuje z tekstem i innymi wa\u017cnymi elementami strony www. Bia\u0142y pozwala odwiedzaj\u0105cemu \"odetchn\u0105\u0107\" i daje czas oraz przestrze\u0144 na lepsze przetworzenie informacji zawartych w tre\u015bci strony internetowej. Owszem, bana\u0142. Niestety bardzo wiele projekt\u00f3w stron www jest przesyconych detalami, kt\u00f3re odwracaj\u0105 uwag\u0119 od tego, co najwa\u017cniejsze. A najwa\u017cniejsza jest tre\u015b\u0107 i minimalizm, zw\u0142aszcza je\u017celi nie mamy milion\u00f3w dolar\u00f3w do wydania na badania rynku w celu sprawdzenia naszego \"szalonego\" pomys\u0142u na odej\u015bcie od regu\u0142y.<\/p>\n Najnowszym trendem jest tzw. \"dark mode\", czyli tryb nocny, kt\u00f3ry odwraca kolory tekstu i t\u0142a. Otrzymujemy wtedy ciemne t\u0142o z jasnym tekstem, kt\u00f3re mniej m\u0119czy oczy i oszcz\u0119dza bateri\u0119 w smartfonach. Nic nie stoi na przeszkodzie by taki kontrast wykorzysta\u0107 r\u00f3wnie\u017c na naszej stronie internetowej. Wtedy role czerni i bieli si\u0119 odwracaj\u0105.<\/p>\n Po\u0142\u0105czenie czerni i bieli to bezpieczny uk\u0142ad - s\u0105 to dwa kolory, kt\u00f3re nigdy nie wyjd\u0105 z mody. Jednak taki monochromatyczny schemat kolor\u00f3w mo\u017ce by\u0107 oparty na dowolnych kolorach, pod warunkiem, \u017ce pochodz\u0105 one z jednej barwy i stanowi\u0105 jej r\u00f3\u017cne odcienie.<\/p>\n No dobrze, powiedzmy, \u017ce mamy ju\u017c wybrane wszystkie kolory. Teraz pojawia si\u0119 jedno bardzo wa\u017cne pytanie...<\/p>\n Oczywi\u015bcie nie ma prostej regu\u0142y. Wiele zale\u017cy od wyczucia, wybranych barw oraz informacji, kt\u00f3re maj\u0105 si\u0119 znale\u017a\u0107 na stronie internetowej. By u\u0142atwi\u0107 sobie nieco zadanie, warto wzi\u0105\u0107 pod uwag\u0119 trzy poni\u017csze sugestie:<\/p>\n Gradienty, czyli p\u0142ynne przej\u015bcia tonalne pomi\u0119dzy r\u00f3\u017cnymi kolorami, to dosy\u0107 niebezpieczny temat. U\u017cyte z powodzeniem mog\u0105 nada\u0107 stronie nowoczesnego i \u015bwie\u017cego wygl\u0105du, jednak\u017ce w bardzo wielu przypadkach s\u0105 u\u017cywane nieodpowiednio, mieszaj\u0105c niedopasowane do siebie barwy czy odcienie. Z tego powodu bardzo wiele stron internetowych z gradientami wygl\u0105da staro, jakby pochodzi\u0142y z poprzedniej dekady.<\/p>\n Je\u017celi ju\u017c zdecydujemy si\u0119 na gradient, warto u\u017cy\u0107 kolor\u00f3w bardzo podobnych do siebie, o zbli\u017conej tonacji. Najlepsze b\u0119d\u0105 odcienie tej samej barwy, dzi\u0119ki czemu gradient b\u0119dzie wygl\u0105da\u0107 nowocze\u015bnie, przypominaj\u0105c bardziej po\u0142ysk lub delikatne odbarwienie nadaj\u0105ce elementom strony internetowej oryginalnego wygl\u0105du. W przypadku wyboru odmiennych kolor\u00f3w do gradientu, najlepiej da\u0107 \"po drodze\" mi\u0119dzy nimi kilka kolor\u00f3w po\u015brednich, by przej\u015bcie by\u0142o p\u0142ynniejsze i przyjemniejsze dla oka.<\/p>\n * * *<\/p>\n Temat kolor\u00f3w na stronie internetowej oczywi\u015bcie nie zosta\u0142 w \u017caden spos\u00f3b wyczerpany. Powy\u017csze porady nie s\u0105 \u017cadnym podr\u0119cznikiem, za kt\u00f3rym nale\u017cy \u015blepo pod\u0105\u017ca\u0107. To tylko wskaz\u00f3wki, b\u0119d\u0105ce jednocze\u015bnie zach\u0119t\u0105 do poszukiwania w\u0142asnych rozwi\u0105za\u0144. W ko\u0144cu najbardziej zapadaj\u0105ce w pami\u0119\u0107 s\u0105 wszystkie odst\u0119pstwa od regu\u0142y.<\/p>\n Trzeba tylko wiedzie\u0107 jak i kiedy :).<\/p>\n A je\u015bli chia\u0142by\u015b stworzy\u0107 witryn\u0119 z idealnym schematem kolorem, sprawd\u017a zestaw naszych szablon\u00f3w. Wszystkie zosta\u0142y stworzone przez zawdowych webdesigner\u00f3w, kt\u00f3rzy dobrze wiedz\u0105 jak powinna wygl\u0105da\u0107 naprawd\u017a dobra strona internetowa!<\/p>\n Do katalogu<\/a><\/span><\/p>\n Kolory Projektu I Konwersja Stron Internetowych<\/a><\/p>\n Web design serwisy, kt\u00f3re u\u0142atwiaj\u0105 \u017cycie projektantom<\/a><\/p>\n![\"kolory](\"https:\/\/www.templatemonster.com\/blog\/pl\/wp-content\/uploads\/sites\/6\/2020\/02\/kolory-dla-strony-01.png\")
<\/p>\nMETODA 1 - ROZPOCZNIJ OD PUSTEGO P\u0141\u00d3TNA<\/h3>\n
\n
\n
\n
\n
\n
\n
METODA 2 - ROZPOCZNIJ OD ZDJ\u0118CIA<\/h3>\n
\n
\n
\n
METODA 3 - ROZPOCZNIJ OD CEL\u00d3W BIZNESOWYCH<\/h3>\n
\n
\n
\n
Jak zmienia si\u0119 postrzeganie kolor\u00f3w w zale\u017cno\u015bci od wieku i p\u0142ci?<\/h2>\n
![\"kolory](\"https:\/\/www.templatemonster.com\/blog\/pl\/wp-content\/uploads\/sites\/6\/2020\/02\/kolory-dla-strony-02.png\")
<\/p>\nJakich kolor\u00f3w unika\u0107 na stronie internetowej?<\/h2>\n
Ilu kolor\u00f3w nale\u017cy u\u017cy\u0107 na stronie internetowej?<\/h2>\n
\n
\n
\n
Jaki wybra\u0107 kolor czcionki na stron\u0119 internetow\u0105?<\/h2>\n
Jaki jest najwa\u017cniejszy kolor na stronie internetowej?<\/h2>\n
Gdzie umie\u015bci\u0107 kolory na stronie internetowej?<\/h2>\n
\n
\n
\n
Czy warto u\u017cywa\u0107 gradient\u00f3w na stronie internetowej?<\/h2>\n
\n<\/h3>\n
\nCzytaj r\u00f3wnie\u017c:<\/h3>\n