Podstawy projektowania: barwa i kolor

Gdybym miała wybrać dwa najtrudniejsze zagadnienia z podstaw projektowania, powiedziałabym, że są to – typografia i barwa. I właśnie tej drugiej chciałabym poświęcić dzisiejszy wpis. Oczywiście pamiętajcie – to co tutaj zobaczycie to tylko zajawka tego tematu – nie ma szans streścić w tak krótkim filmie wszystkich zasad rządzących się pracą z barwą. Ale postaram się powiedzieć o tych najważniejszych, a także powiem o kilku pojęciach, które warto sobie poszukać w książkach, internecie i po prostu się z nich podszkolić.

Na początek fun fact, pokroju różnicy między czcionką, fontem, a krojem pisma. Określeń barwa i kolor używamy zazwyczaj wymiennie, tymczasem są to dwa różne pojęcia. I choć w języku polskim traktuje się je jako synonimy, możecie kiedyś spotkać się z rozróżnieniem na barwę jako wrażenie wzrokowe i kolor jako jedną z właściwości barwy (obok jasności i nasycenia). Niemniej jednak, w codziennej pracy nie ma to absolutnie żadnego znaczenia. Taka ciekawostka.

Czym jest barwa?

Ok. Ale przejdźmy zatem do tematu barwy. Co to właściwie jest? W gruncie rzeczy to pojęcie łączące fizykę, biologię i psychologię. Skąd taka mieszanka? A no stąd, że to co odbieramy jako barwy, to nic innego jak promieniowanie elektromagnetyczne, które dociera do naszego oka. Mamy więc wiązki światła (fizyka), nasze oczy (biologia) i mózg, który przetwarza informacje (psychologia).

Największy problem z barwą jest taki, że nigdy nie mamy pewności, że inni widzą ją dokładnie w ten sam sposób. To pojęcie bardzo subiektywne i w jaki sposób barwę będziemy odbierać, będzie różniło się w zależności od tego w jakiej kulturze się wychowaliśmy i co po prostu uważamy za atrakcyjne. Są również osoby, które cierpią na całkowitą lub częściową ślepotę barw – jest całkiem sporo dysfunkcji wzroku i w związku z tym, projektując cokolwiek powinniśmy wykorzystać wyróżnienia nie tylko bazujące na barwie.

Barwy i emocje

Barwa niesie ze sobą ładunek emocjonalny. Z całą pewnością spotkaliście się już z zestawieniami – co oznacza jaka barwa, jakie emocje są z nią związane, z czym się kojarzy. Zanim bardzo przywiążecie się do tego, co tam jest napisane, warto zaznaczyć dwie rzeczy. Po pierwsze – rozumienie barw i to jak je odbieramy będzie różniło się w zależności od tego w jakiej kulturze się wychowaliśmy. Po drugie ważny jest kontekst w jakim występuje barwa.

znaczenie barwy w grafice
Zerknijcie na tę grafię – zwróćcie uwagę, że zastosowano tu różne kroje pisma i to już bardzo zmieniło znaczenie tych napisów. Więc sama barwa, to jedno, ale to co będzie występowało obok niej jest równie ważne.

Z czego składa się barwa?

Żeby jednak skutecznie pracować z barwami, może przydać Wam się kilka pojęć. To pojęcia nie tylko związane z samą teorią, ale w praktyce, w codziennej pracy, również możecie się z nimi spotkać.
Zacznijmy może od składowych barwy.

Po pierwsze – mamy odcień. Kiedy mówimy, że coś jest zielone albo czerwone to właśnie odnosimy się do tego pojęcia.

barwa w projektowaniu graficznym

Później mamy nasycenie – możecie myśleć o tej wartości, jako tej, która sprawia, że jedne kolory są mocniejsze, intensywniejsze (czyli bardziej nasycone), a inne bardziej wyblakłe, zbliżone do szarości i zdecydowanie mniej rzucające się w oczy.

barwa w projektowaniu

I na koniec mamy jasność – czyli określenie, które ocenia czy barwa jest jaśniejsza czy ciemniejsza. Warto tu zaznaczyć, że kolory mogą wyglądać na jaśniejsze lub ciemniejsze w zależności od ich otoczenia.

barwa w grafice

Koło barw

Żeby omówić kolejne zagadnienia trzeba również zerknąć na tak zwane koło barw. To poglądowy model, który tłumaczy jak mieszają się barwy. Pierwszy model stworzył Isaac Newton, gdzie pokazał barwy podstawowe: czerwony, żółty i niebieski (czyli te, z których będziemy tworzyć kolejne kolory). Z połączenia żółtego i czerwonego mamy więc pomarańczowy, z żółtego i niebieskiego robi nam się zielony, z niebieskiego i czerwonego powstaje fiolet. Te barwy będziemy nazywać pochodnymi.

koła barw

I je dalej możemy ze sobą mieszać, więc robi się ich całkiem sporo.

Barwy ciepłe i barwy chłodne

A skoro mamy już koło barw, to łatwo pokazać na nim pojęcia barw ciepłych i chłodnych. Jak spojrzycie na część koła od części barwy zielonej, przez żółcie, pomarańcze, czerwienie, aż do części fioletów to zobaczycie właśnie barwy ciepłe. Natomiast te po drugiej stronie, będziemy określać mianem chłodnych.

barwy ciepłe i chłodne

Przyjęło się, że barwy ciepłe są bardziej pozytywne, pobudzające, przyjemne, a chłodne uspokajające, albo nawet przygnębiające, ale jak wspomniałam – liczy się kontekst. I w zależności od niego zupełnie na odwrót możemy dane barwy odbierać.

Barwa – jak połączyć ją z innymi?

No i jak już sobie wytworzyliśmy tyle tych kolorów to przydałoby się jeszcze wiedzieć jak je połączyć. I tu możemy sięgnąć po kilka schematów, które trochę ułatwią pracę z barwami. Pierwszy to kolory monochromatyczne. Jeżeli weźmiemy sobie koło barw i wyciągniemy z niego jeden pasek to otrzymamy właśnie paletę monochromatyczną, czyli stworzoną z różnych odcieni tego samego koloru.

paleta monochromatyczna

Jeżeli chwycimy sąsiadujące ze sobą barwy otrzymamy schemat analogiczny – to takie bezpieczne połączenie zbliżonych do siebie barw, jednak ciekawsze, bo trochę bardziej zróżnicowane niż monochromatyczne.

paleta barw analogicznych

Jeżeli weźmiemy barwy po przeciwnych stronach koła to stworzymy schemat uzupełniający. Tu możemy zbudować bardzo mocne i atrakcyjne dla oka kontrasty, ale równie dobrze, można je zepsuć przez złe dopasowanie kolorów i nasycenia.

barwy dopełniające

Potem mamy triady i tetrady, czyli na kole kreślimy sobie trójkąt, kwadrat (można też prostokąt) i na tej bazie budujemy paletę barw. Tu jeszcze łatwiej o błędy, bo po prostu do opanowania mamy więcej połączeń i kluczowe jest żeby dobrze je do siebie dopasować. Tak żeby były przyjemne dla oka, miały odpowiednio duże kontrasty między sobą, czyli generalnie jest co trenować.

triady i tetrady

Jak uniknąć błędów?

Po pierwsze, pamiętajcie o czytelności. Jeżeli wrzucacie do projektu teksty, to upewnijcie się, że kolor liter względem tła jest wystarczająco kontrastowy. Z kontrastem też nie można przesadzić – zbyt intensywne połączenia mogą być wręcz bolesne dla naszych oczu. Dodajcie do tego jeszcze małe fonty, a co odważniejsi jeszcze dorzucą tekstury albo zdjęcie w tle i mamy przepis na porażkę.

Błędy w użyciu barw

Pamiętajcie, że barwy sprawdzamy w kontekście. To znaczy, możecie narzucić sobie najpierw przed tworzeniem projektu jakąś paletę, ale w trakcie pracy nie bójcie się trochę ją zmieniać i dostosowywać do elementów w kompozycji. Inaczej będą wyglądać te same kolory umieszczone na dużej powierzchni lub bardzo pomniejszone. To samo jeżeli chodzi o łączenie kolorów – w zależności jak je obok siebie ułożymy możemy mieć wrażenie zupełnie innych barw (mimo, że wciąż używamy tych samych).

O czym jeszcze warto pamiętać?

W pracy możecie spotkać się z zasadą 60-30-10 – jest popularna wśród projektantów wnętrz, ale projektanci graficzni również mogą z niej skorzystać. Dzieli paletę na trzy części i proporcje, które występują w projekcie – 60% to dominanta – kolor, którego będzie najwięcej, 10% stanowi najmocniejszy kolor, którego używać będziemy na przykład na stronie do wyróżnienia przycisków, a 30% to kolor dopełniający.

60-30-10

Koniecznie zapoznajcie się z tematyką przestrzeni barw – projektanci, którzy chcą pracować z brandingiem albo tworzyć projekty do druku muszą opanować ten materiał do perfekcji. Linki do artykułów wrzucę Wam w podsumowaniu.

Testujcie swoje projekty – jeśli robicie strony i aplikacje, wyświetlajcie je na możliwie największej ilości urządzeń – zobaczcie jak wyglądają na telefonie, a jak na różnych monitorach. To pomoże Wam uświadomić sobie jak różnie będą odbierane Wasze projekty i jak ważne jest dobranie barw tak, żeby w tych różnych warunkach wyglądały dobrze.

No i na koniec. Jeżeli nie czujecie się swobodnie w pracy z barwą, korzystajcie z gotowych palet albo narzędzi, które pomogą takie stworzyć. W linkach wrzucę Wam kilka aplikacji, które świetnie wspierają projektantów w pracy z kolorami. Serio, nie musicie od razu wymyślać wszystkiego zupełnie od zera.

Barwa – podsumowanie

Praca z barwą na początku może wydawać się dość trudna. To całe dopasowywanie do siebie kolorów, które wydaje nam się super, innym zupełnie się nie spodoba. To jednak bardzo pouczające doświadczenie – odkrywamy dzięki temu jak różnymi ludźmi jesteśmy i w jak różny sposób będziemy odbierać podobne projekty.