Blog

Wybór kolorów dla strony

Pamiętacie straszne strony z początku lat dwutysięcznych? Wtedy mało kto słyszał o właściwym doborze palety kolorów – robiono wszystko na wyczucie. Teraz jednak web designer ma do dyspozycji pełen pakiet wiedzy, umiejętności i narzędzi – wystarczy je zastosować. W tym artykule opowiemy o podstawowych zasadach wyboru palety kolorów na stronie oraz o przydatnych narzędziach.

Dlaczego ważne jest właściwe dobranie kolorów?

Ponieważ to właśnie paleta kolorów jest pierwszą rzeczą, na którą zwraca uwagę odwiedzający stronę. Przyjazna nawigacja, funkcjonalność, zawartość strony, asortyment towarów – to wszystko też jest ważne, ale później.

Dlatego w pierwszej kolejności trzeba myśleć o użytkowniku, który wizualnie odbiera waszą stronę. I o kliencie, który tę stronę zamawia. Czasami pojawiają się rozbieżności: klient widzi jedną paletę kolorów, web designer rozumie, że to będzie wyglądać okropnie. Dlatego obie strony muszą współpracować i słuchać się nawzajem.

Jeśli więc jesteś web designerem, twoim zadaniem jest przekazać klientowi następujące myśli:

1. Zbyt wiele kolorów to nie jest dobrze. Strona będzie wyglądać tanio i krzykliwie, a jaskrawe kolory mogą odciągnąć użytkownika od treści na stronie.
2. Zbyt mało kolorów też nie jest korzystne. Optymalne połączenie kilku kolorów poprawia wizualny odbiór. Dalej opowiemy, jak wybrać kolor podstawowy i dodatkowe.
3. Każdy kolor wywołuje określoną reakcję emocjonalną. Jasnoczerwony – energię, siłę, pasję. Bladoróżowy – delikatność, miękkość. Fioletowo-czarny przywodzi na myśl mistyczne, tajemnicze skojarzenia.
4. Ten sam kolor może być różnie odbierany przez designera i klienta (i użytkownika strony). Weźmy fuksję – dla jednych to różowy, dla innych – malinowy, a wielu w ogóle nie wie, jaki to kolor. Dlatego ważne jest omówienie wszystkich niuansów na samym początku.
5. Wiele zależy od docelowej grupy odbiorców strony. Jeśli klient tworzy sklep internetowy z produktami dla kobiet w ciąży, delikatne pastelowe kolory bardziej spodobają się grupie docelowej – przyszłym mamom. Takie kolory nie przestraszą ich, wywołają pozytywne emocje i w konsekwencji – chęć zakupów. Agresywne tony w tym przypadku zadziałają na niekorzyść.
6. Jeśli klient ma już ustalony styl firmowy – świetnie. Wtedy strona również powinna być utrzymana w kolorach korporacyjnych.
7. Jeśli nie – przeanalizuj, jakie kolory używają konkurenci. Nie namawiamy do kopiowania udanego designu, w żadnym wypadku. Ale podstawowe kolory, ich połączenia, wygląd różnych elementów strony można dostosować do klienta. O ile mu się to spodoba, oczywiście.

Wybieramy paletę kolorów:
^{instrukcja krok po kroku}

Przykład możliwej kombinacji kolorów dla strony internetowej

1️⃣ Wybieramy kolor podstawowy

Analizujemy docelową grupę odbiorców strony. Tworzymy jej portret. Najlepiej, jeśli będzie to narysowana postać: na przykład kobieta o imieniu Małgorzata, 25 lat. Wykształcenie wyższe. Mieszka w dużym polskim mieście. Oczekuje lub planuje dziecko. Gotowa wydawać na zakupy 3 tysiące złotych miesięcznie.

Teraz pozostaje wyobrazić sobie, jaki kolor będzie najbardziej przyjemny dla tej miłej kobiety, jakie emocje u niej wywoła. Delikatny, pastelowy, bladoróżowy – to jest to.

Weźmy inny przykład: strona sprzedająca artykuły sportowe. Tutaj będzie inna postać: powiedzmy, Andrzej, 30 lat, pasjonuje się sportem i turystyką, wydaje duże sumy jednorazowo i drobne kwoty – stale. Oczywiście, delikatne stonowane tony nie będą pasować do Andrzeja. Najprawdopodobniej taki człowiek lubi szybkość, dynamikę, adrenalinę. Można postawić na kolor podstawowy czerwony lub zielony.

A co zrobić, jeśli docelowa grupa odbiorców dzieli się na wiele segmentów? Załóżmy, że sprzedajesz odzież dla całej rodziny – to znaczy, że twoją grupą docelową są zarówno mężczyźni, jak i kobiety? Wtedy można łączyć kolory podstawowe. Na przykład czerwony i pastelowy, zielony i bladozłoty.

Gdzie będzie używany kolor podstawowy?

Dominujący kolor to niekoniecznie tło głównego ekranu. Trzeba go używać z rozwagą: rozcieńczając innymi kontrastowymi elementami lub stosując w tych blokach i formach, na które chcesz zwrócić uwagę użytkownika. Jeśli mówimy o sklepie internetowym – to na przykład w logo, przyciskach CTA, formularzu zamówienia, w sekcji wyprzedaży lub nowości.

2️⃣ Wybieramy kolory akcentujące

Koloru podstawowego jeszcze nie wystarczy do pełnego designu. Wybraliście czerwony – teraz trzeba znaleźć kolory dodatkowe, aby rozcieńczyć podstawowy. Ten sam kolor podstawowy w połączeniu z innymi daje zupełnie różne efekty.

Na przykład czerwony w połączeniu z innymi kolorami traci swoją agresywną naturę i zyskuje nowe oblicza. Porównajcie, jakie skojarzenia wywołuje połączenie czerwonego koloru z kilkoma innymi:

Gdzie używane są kolory akcentujące?

Te dodatkowe kolory przydadzą się do ozdabiania detali: przycisków CTA, nagłówków artykułów lub kart towarów, nazw sekcji menu. W poniższym zrzucie ekranu takim dodatkowym kolorem jest pomarańczowy.

Narzędzia
^{do doboru palety kolorów}

Oczywiście, warto opanować naukę łączenia kolorów i ponownie – wpływu tych połączeń na użytkownika. Dobrze, że istnieją specjalne narzędzia, które ułatwią wam to zadanie i dobiorą gotowe schematy kolorów. Poznajmy się z podstawowymi z nich.

Adobe Color CC

Serwis Adobe Color – to rozszerzenie, wbudowane w starego dobrego Photoshopa. Za jego pomocą można tworzyć różne kombinacje kolorów, przeglądać popularne tematy kolorystyczne, zapisywać znalezione w swoich tematach lub w Photoshopie. W tym serwisie dostępne są zarówno standardowe rozwiązania (na przykład monochromatyczność, połączenia i triada), jak i wiele dodatkowych funkcji. Mogą z niego korzystać zarówno nowicjusze, jak i doświadczeni web designerzy.

Color Safe

Ten program – to nie tylko paleta kolorów. Serwis oparty jest na zaleceniach Wytycznych dotyczących dostępności treści internetowych (WCAG). Na przykład duża uwaga poświęcona jest zasadzie zachowania koloru na pierwszym planie, współczynnikowi kontrastu. Jeśli jeszcze o tym nie słyszeliście – zgłębiajcie teorię, WCAG do waszej pomocy!

Check my Colours

Niezwykle przydatne narzędzie, które nie tylko dobiera idealne połączenie kolorów, ale także ocenia ich kombinacje. Na przykład, na ile dobrze się ze sobą łączą, czy mają wystarczający kontrast i tak dalej. Wiadomo, że na oko nawet profesjonalnemu web designerowi trudno to ocenić. A za pomocą specjalnych algorytmów, zalecanych przez World Wide Web Consortium – łatwo!

Paletton

Serwis dla doświadczonych web designerów. Oprócz zwykłych funkcji doboru kolorów posiada różnorodne ustawienia, dzięki którym można tworzyć, eksperymentować, tworzyć najbardziej niezwykłe połączenia. Najciekawsze jest to, że po wybraniu kolorów można uruchomić tryb modelowania, aby zobaczyć, jak paleta kolorów będzie wyglądać w różnych trybach ekranu.

Adobe Kuler

Internetowy konstruktor schematów kolorystycznych pozwala tworzyć palety kolorów na każdy gust lub korzystać z już stworzonych szablonów – w sekcji Explore – i uzupełniać je według własnego uznania. Istnieje własna społeczność, w której można dzielić się doświadczeniami. Ważny moment: wszystkie stworzone palety są zapisywane w osobistym koncie na stronie Adobe.com. W tym celu, rzecz jasna, trzeba zarejestrować się na stronie i uzyskać swój ID.

Contrast-A

Dość skomplikowany serwis, który oparty jest na klasycznych zasadach designu i wyróżnia się solidnym podejściem. To narzędzie analizuje, jak kolory wpływają na siebie nawzajem. Na przykład, jak odnosi się kanał jasności (Luminance Ratio) i różnice w jasności i kolorze. Najlepiej to narzędzie sprawdzi się, jeśli przed web designerem stoi zadanie stworzenia minimalistycznej strony z niewielką ilością kolorów.

Color Hunter

Proste i wygodne narzędzie, które działa w ten sposób: ładujesz dowolny obraz lub link do niego w serwisie, a ten tworzy paletę kolorów, która najlepiej z nim harmonizuje. Można także dobierać kolory po słowie kluczowym (na przykład sport, ciąża, odzież i tak dalej). Stworzoną paletę można zapisać i używać w razie potrzeby.

ColorZilla

To nawet nie serwis, a wtyczka do Chrome i Firefox. Za jej pomocą można bezpośrednio w przeglądarce rozwiązać różnorodne zadania związane z doborem koloru: na przykład określić wartości kolorów, różnice między nimi, stworzyć potrzebną paletę kolorów. A także można wybrać używane kolory na stronie, która jest otwarta w przeglądarce.

Colorotate

Nietypowy zasób, który pokazuje paletę kolorów nie w postaci koła, jak zwykle, ale w postaci trójwymiarowego stożka. Narzędzie pozwala tworzyć, edytować i zapisywać stworzone palety. Serwis działa samodzielnie, jak i w połączeniu z Adobe Photoshop. Dostępny jest także w formie aplikacji na iPada.

Colourcode

Colourcode – narzędzie, które mogą używać nawet nowicjusze. Charakteryzuje się szerokim wyborem typów schematów kolorów: monochromatycznym, analogowym, triadowym, czworokątnym i innymi stylami. Kiedy stworzysz paletę kolorów, możesz podzielić się nią z przyjaciółmi, zapisać na komputerze, pobrać jako tabelę lub w formacie PNG.

Palettr

W tym serwisie nie wybierasz kolorów ręcznie według różnych typów. Paleta jest generowana na podstawie określonych parametrów: na przykład, podajesz wybrany temat (jesień, wiosna, lato), miasto (Nowy Jork, Paryż, Rzym) i tak dalej. Takie rozwiązania cieszą się popularnością wśród klientów stron.

Material Design Palette

Kolejne narzędzie dla początkujących web designerów. Jeden niuans: tutaj wyznawane są zasady designu materialnego. Jest to język graficzny i styl opracowany przez firmę Google, jeśli krótko – podstawowe zasady designu w połączeniu z nowoczesnymi technologiami. Według takiej zasady w Google opracowano zbiór zasad do tworzenia różnych elementów designu: animacji, stylów, układów i tak dalej.

Otóż, istota działania tego narzędzia jest taka: wybierasz dwa kolory – podstawowy i dodatkowy, a system pokazuje, jak będą wyglądać w rzeczywistości. Dalej wszystko jak zwykle: można zapisać i pobrać wybraną paletę.