Dobieranie kolorów na stronę

Dobieranie kolorów to bez wątpienia jedna z ważniejszych części pracy nad projektem graficznym strony internetowej. Zresztą, wszędzie gdzie mamy do czynienia z jakimkolwiek projektowaniem i grafiką, barwy odgrywają kluczową rolę.

W przeciwieństwie do wielu poradników jakie można znaleźć na temat w Internecie, nie będę się zajmował aspektami psychologicznymi i wpływie poszczególnych odcieni na odbiór prezentowanych treści. Chcę pokazać parę sprawdzonych metod na tworzenie poprawnej kompozycji barw opartych o pewne reguły, których można się nauczyć.

Co warto kolorować?

Istotne jest także to, co kolorujemy. Unikajmy barwienia głównego tekstu, ponieważ może to wprowadzać w błąd Internatów. Ułatwieniem dla odwiedzających stronę jest podkreślanie kolorem następujących elementów:

  • nawigacji
  • linków
  • odwiedzonych linków
  • linków pod wskaźnikiem myszy (tzw. hover)
  • stopki

Generalnie, z nasyconymi barwami nie należy przesadzać. Część wizualna strony jest bardzo ważna ale musimy się pogodzić z faktem, że najważniejsza jest treść. Ciężko będzie się skupić Internautom na treści jeżeli wokół będzie zbyt dużo różnych, jaskrawych kolorów. To ciekawe, że kolorystyka może być niepoprawna nawet przy użyciu bardzo małej ilości barw a doświadczeni designerzy są w stanie łączyć praktycznie całe palety.

Trochę praktyki

Poniżej prezentuję znane reguły doboru barw w oparciu o koło kolorów i ich zastosowanie. Są one na tyle uniwersalne, że przydadzą się do komponowania  innych publikacji elektronicznych a nawet materiałów drukowanych.

Triada kolorów – mamy z nią do czynienia kiedy z koła kolorów wybieramy trzy barwy maksymalnie odległe od siebie. Triadę stosujemy przy bardzo żywych projektach. Mimo, dużego nasycenia, pozwoli nam uzyskać odpowiedni balans pomiędzy poszczególnymi kolorami.

Dobrym pomysłem jest pobór kolorów bliżej środka koła, tak jak na grafice obok. Dzięki temu barwy będą miały więcej bieli i schemat nie będzie taki krzykliwy.

Triada

Kolory dopełniające – to para barw leżących na przeciw sobie na kole kolorów.

Dobór tego typu wzmacnia kontrast i nie pozwoli pozostać Internaucie obojętnym wokół zawartości, w skład której wchodzą elementy o tak dobranej kolorystyce.

Schemat przydaje się w podkreślaniu krytycznie istotnych informacji lub elementów np. alertów czy przycisków.

dopelniajace

Kolory analogiczne – jak widać to zbiór barw położonych blisko siebie na kole kolorów.

Taki zestaw zapewnia harmonię i naturalny wygląd, ponieważ taki schemat możemy dostrzec w przyrodzie.

Kolory analogiczne naśladują gradienty, więc można sądzić, że mogą śmiało uczestniczyć jako składowe tła czy większych elementów na stronie internetowej.

analogiczne

Pomocne narzędzia

Świetnym narzędziem do zabawy ze schematami kolorów jest Kuler firmy Adobe. Ta działająca w przeglądarce aplikacja prezentuje różne schematy kolorów i daje możliwość manipulowania nimi a nawet zapisywania swoich poczynań. Dodatkowym atutem jest możliwość przeglądania opublikowanych schematów stworzonych przez innych użytkowników.

Uniwersalną i ponadczasową sztuczką jest stosowanie barw analogicznych np. kilku odcieni szarości i jednego koloru dopełniającego.

paleta

Dzięki temu łatwo utrzymać jeden temat kolorystyczny i trudno o pomyłkę w doborze poszczególnych barw. Publikacje wyglądają atrakcyjnie i są bardzo czytelne. Jest to zawsze jakieś wyjście dla tych, którzy w ich dobieraniu nie czują się zbyt mocni. Tak na marginesie, często stosuję takie rozwiązania we własnych projektach.

Podsumowanie

Posługiwanie się kolorami to chyba najtrudniejsza część projektowania grafiki użytkowej. Stosowanie kolorów powinno być zawsze mocno uzasadnione. Stosowanie barw to jedna z technik, która może pomóc w odbiorze informacji. Podejmujmy wszelki wysiłek, aby stosować mile dla oka i czytelne schematy kolorów. Moja rada: jeśli nie czujesz się w tym dobrze, skorzystaj z gotowych szablonów.

Dobieranie kolorów na stronę
4.5 (90%) głosów: 2