Jak odpowiednio dobierać kolory? Teoria kolorów dla początkujących web deweloperów.

Wybór kolorystyki to jedna z pierwszych decyzji podczas projektowania strony. Ważnym jest, aby dobrać ją odpowiednio do charakteru strony (widzieliście kiedyś wnętrze szpitala w odcieniach czerni?) i obranego przez nas stylu. Jeżeli zdecydujesz się wybrać dwa lub trzy losowe kolory bez żadnego ładu to zniechęci to odwiedzających i będzie po prostu źle wyglądać. Badania wykazały, że jeżeli użytkownikowi nie spodoba się witryna to będzie wolał poszukać interesującej go rzeczy gdzieś indziej. Oznacza to, że nieprawidłowo zaprojektowana bądź aestetyczna strona po prostu odstrasza klientów. Więc w jaki sposób stworzyć odpowiednią stronę internetową? Ważne są dwie rzeczy – rozmieszczenie elementów na stronie tak, aby była jak najbardziej intuicyjna oraz odpowiedni design.

Jak kolorystyka wpływa na sukces strony?

 

Kolory wpływają na sukces stron internetowych na kilka różnych sposobów. Jak już wspomniałem badania wykazały, że klienci opuszczają witryny, które nie są dla nich atrakcyjne wizualnie oraz podejmują decyzję o zakupie produktu w oparciu o jego kolor (Aż 65% pytanych wskazało kolor jako najważniejszy czynnik decydujący o zakupie w przypadku przedmiotu codziennego użytku). Oznacza to, że na zachowania klientów mają wpływ kolory, które widzą. Jeśli zależy Ci na szybkiej sprzedaży produktu, musisz stworzyć „poczucie pilności” dla klienta. A kolory pomogą ci to zrobić. Jedną z zalet kolorów jest to, że klient tak naprawdę o nich nie myśli, kolory potrafią podświadomie wpłynąć na jego emocje. Gwarantuję Ci, że wyróżniający się wielkością element z czerwonym tłem a w nim znajdujący się produkt, najlepiej z dopiskiem „PROMOCJA, POZOSTAŁA 1 GODZINA” zwróci uwagę potencjalnego nabywcy. Skoro małe wprowadzenie mamy za sobą rzućmy okiem na podstawowe informacje o kolorach, aby lepiej zrozumieć, jak kolory wpływają na twoją witrynę, sprzedaż i nawyki klientów.

 

Czym jest model RGB i RGBa?

 

Model RGB (red – czerwony, green – zielony, blue – niebieski) jest modelem barw opartym na właściwościach odbiorczych ludzkiego oka. Praktycznie wszystkie barwy da się uzyskać mieszając w odpowiednich stężeniach kolor czerwony, zielony i niebieski. Polega on na mieszaniu światła, co oznacza, że im większe wartości poszczególnych składowych tym większą intensywność światła o danej barwie uzyskasz. Kolory w tym modelu zapisywane są poprzez podanie intensywności trzech barw składowych (r, g, b) a składowe te otrzymują wartości całkowite od 0 do 255. Model RGBa (r,g,b,a) jest w istocie tym samym, czym RGB, lecz z dodatkiem czwartej składowej odpowiadającej za przezroczystość (alpha), która przyjmuje wartości wymierne od 0 do 1.

 

Odpowiednie zatosowane kontrastu w projekcie

 

Kontrast jest podstawowym narzędziem tworzenia atrakcyjności wizualnej strony oraz przyciągnięcia uwagi użytkownika w to miejsce, w które chcemy. Ponadto uwidocznia on różnice pomiędzy elementami, na przykład pomiędzy tłem przycisku a napisem na nim. Trzeba pamiętać, że aby kontrast był skuteczny musi być on odpowiednio silny, jeżeli taki nie będzie otrzymamy jedynie konflikt pomiędzy elementami (Szary napis na czarnym tle jest doskonałym przykładem konfliktu). Kontrast tworzymy na wiele sposobów, możemy na tle ciemnego elementu stworzyć element jasny, duże pismo zestawić z małym, pogrubione z normalnym, itd.

 

Koło kolorów

 

Jeśli nigdy wcześniej nie pracowaliście z kolorami, macie przyjemność poświęć trochę czasu na zabawę z kolorami i zobaczyć, jak działają i wyglądają gdy są połączone. Tutaj z pomocą przychodzi firma Adobe, udostępniając koło kolorów, które służy właśnie do testowania kompozycji przeróżnych kolorów.

Gdy już dobrze się w tym zorientujesz, powinieneś zacząć myśleć o schemacie kolorów swojej witryny. Na początku należy wybrać kolor dominujący. Najczęściej jest to kolor kojarzący się z marką, którą strona reprezentuje. Jeżeli jednak nie masz żadnego wyznacznika, a dla przykładu tworzysz stronę związaną z naturą to kolor zielony powinien spełnić swoje zadanie i będzie bezpiecznym wyborem jako podstawowy kolor dominujący.

Kiedy podejmiesz już decyzję o dominującym kolorze na twojej stronie raczej wolałbyś uniknąć dodawania do niego innych losowych kolorów, ponieważ możesz skończyć z kolorystycznym bałaganem, gdzie każdy będzie starał się przebić przez inne. Następnym krokiem w tym procesie jest dobranie kolorów drugorzędnych, które będą pasowały do naszego koloru dominującego. Tutaj z pomocą przychodzą nam  schematy, które pomogą nam dobrać odpowiednie kolory, które podkreślą kolor podstawowy oraz dodadzą coś od siebie.

 

Harmonie kolorów i ich schematy

 

Istnieje wiele harmonii i schematów kolorów, które łączą się ze sobą na kole kolorów, a każdy schemat korzysta z przeróżnych wariancji, aby zapewnić najlepsze dopasowanie. Oto kilka najpopularniejszych z nich:

 

Monochromatyczne

Kolory monochromatyczne to najprościej mówiąc różne odcienie jednej barwy. Kolory te nie kontrastują prawie wcale, lecz w zamian są bardzo spójne i tworzą ład.

 

Dopełniające

Kolory dopełniające to te kolory, które na kole kolorów znajdują się naprzeciwko siebie. Kolory te mają wysoki kontrast i wyglądają żywiołowo gdy są umieszczone obok siebie, a po połączeniu tworzą szarość.

Triada

Kolory w układzie triadycznym to te kolory, które tworzą trójkąt na kole. Umieszczone obok siebie najczęściej są bardzo intensywne i żywe, ale dobrze się równoważą. Przykładowym połączeniem jest niebieski, pomarańczowy i czerwony. 

Analogiczne

Kolory analogiczne to te, które na kole kolorów znajdują się obok siebie. Kolory te nie są mocno kontrastujące i świetnie się uzupełniają.

Roździelone kolory dopełniające

Schemat jest podobny do kolorów dopełniających się, lecz używa on koloru podstawowego, a następnie dwóch przeciwnych kolorów sąsiadujących. Kolory te mają minimalnie mniejszy kontrast niż w modelu dopełniającym, lecz są bardziej harmonijne.

Kwadrat

Schemat ten używa aż czterech odległych od siebie kolorów, a ich ustawienie formuje kwadrat. Przykładowo możemy użyć koloru czerwonego, niebieskiego, zielonego i żółtego. Najlepszym sposobem, aby ten schemat kolorów działał jest dominacja jednego z kolorów. Dobrym pomysłem jest również użycie tego schematu w sytuacji, kiedy chcemy, aby każda kategoria na naszej stronie miała oddzielną kolorystykę.

 

Teraz powinieneś samemu się przekonać jak działają różne kombinacje kolorów i schematów w praktyce. Dobrym ćwiczeniem będzie stworzenie na twojej witrynie przycisku „Kup teraz”. Jako, że jest to dość istotny dla ciebie przycisk powinien zwracać uwagę użytkownika i podświadomie zachęcać go do naciśnięcia. W tym przypadku powinieneś użyć kolorów wyraźnie kontrastujących z wybranym przez ciebie kolorem dominującym. Na sam koniec pamiętaj, że nie wybiera się kolorów dla twojej strony internetowej tylko na podstawie własnego odczucia. W rzeczywistości może to zniechęcić klientów, zwłaszcza, kiedy oni mogą postrzegać to połączenie za nieudane. Pamiętaj, że jeśli twoja strona internetowa będzie wypełniona chaotycznymi informacjami i oślepiającymi kolorami ludzie po prostu poszukają alternatywy.

Komentarze do wpisu

Hej Alex, wydaje mi się, że tłumaczenie „analogowych” kolorów jest nie odpowiednie. Chodzi tu o „analogiczne” kolory (z ang. analogous). Prosze popraw tą literówkę z tłumacza 😉

Poprawione, dzięki!

This paragraph gives clear idea in favor of the new people of blogging,
that truly how to do running a blog.

Dodaj komentarz

*Wypełnij wszystkie pola poprawnie

BYĆ MOŻE TO CIĘ ZAINTERESUJE

Dodane przez Alex Pietrzak | 27 stycznia 2018
Kiedy powinienem używać jednostek rem, em, % i pikseli?
Niedawno przeglądając internet znalazłem całkiem interesujące pytanie odnośnie jednostek miar, mianowicie kiedy powinno się używać poszczególnych z nich? Szybki flashback uświadomił mi, że sam miałem ten problem kiedy zaczynałem swoją...
Dodane przez Alex Pietrzak | 19 stycznia 2018
Bootstrap 4 w końcu wydany!
Po niezliczenie wielu publikacjach wersji alpha i beta oraz przesuwaniu daty oficjalnej premiery w końcu jest, bootstrap 4 miał wczoraj oficjalną premierę. Jednak dla osób, które korzystały z którejś z...