Webdesign & UX

Dopasuj barwy witryny – kolorystyczne ‚co i jak?’

Czym byłaby strona www bez graficznej obróbki? Odpowiedź jest prosta. Byłaby jednym, długim ciągiem tekstu, który niczym by nie zachęcał, sprawiał wrażenie nudnego i męczącego. Wbrew pozorom, takie spojrzenie na sieć, nie jest zbyt odległe. Jeszcze kilka, kilkanaście lat temu większość internetowych serwisów w ten sposób własnie funkcjonowała. Na szczęście w czasach dzisiejszych mamy do dyspozycji znacznie więcej możliwości.

Programy typu Photoshop i GIMP są potężnymi narzędziami dzisiejszych webdesignerów. Jednak samo opanowanie ‚kombajnów graficznych’ nie gwarantuje nam sukcesu. Liczy się również Wasz zmysł – zdolność dopasowania kolorystyki. To od niej zależy pierwsze wrażenie, któremu ulegnie potencjalny gość. Dzięki perfekcyjnemu dobraniu barw możemy zostać zapamiętani, w pozytywnym tego słowa znaczeniu.

O KOLORZE SŁÓW KILKA – TEORIA

W najlepszej sytuacji znajdują się osoby, które bez problemu składają, dopasowują i mieszają ze sobą barwy. Ich strony są przejrzyste, kolorystycznie współgrające. Jest do ogromny plus dla webdesignera, dzięki temu jego projekty mogą stać się popularne wśród sieciowej społeczności, co z pewnością przełoży się na prestiż i coraz większą liczbę zleceń. Nie wszyscy jednak obdarzeni są wyżej wspomnianym atutem. To dla nich jest właśnie ten artykuł. Jeśli szukasz pomocy w świecie kolorów, brakuje Ci inspiracji przy tworzeniu nowego projektu lub po prostu jesteś ciekawy moich przemyśleń, zapraszam do lektury.

Koło barw – zacznij od tego

Koło barw jest najbardziej znanym atrybutem wielu grafików. To tutaj wszystko bierze swój początek. Dzięki niemu możemy w łatwy sposób znaleźć kolory kontrastujące ze sobą lub harmonijnie współgrające. Koło składa się z 6 podstawowych kolorów: czerwony, pomarańczowy, żółty, zielony, niebieski i fioletowy. Ponadto znajdują się w nim jeszcze barwy poboczne, utworzone z wymieszania tych sąsiadujących ze sobą. 

 

Kolory podstawowe

Istnieją trzy podstawowe kolory: czerwony, żółty i niebieski. Nie uzyskamy ich przez zmieszanie innych kolorów. Pozostałe, dodatkowe barwy mogą być utworzone przez połączenie tych trzech odcieni, co zapewni nam pełną swobodę w budowaniu layoutu witryny.

Kolory dodatkowe

Są także trzy z nich: pomarańczowy, zielony i fioletowy. Tworzymy je poprzez zmieszanie czerwonego i żółtego (pomarańczowy), żółtego i niebieskiego (zielony) oraz niebieskiego i czerwonego (fioletowy).

Kolory wyższe

Aby uzyskać jedną z wyższych barw trzeba wymieszać jeden podstawowy kolor i jeden dodatkowy.

Kolory dopełniające

Kolory dopełniające to takie, które znajdują się naprzeciwko siebie na kole barw: czerwony i zielony, niebieski i pomarańczowy, fioletowy i żółty. W połączeniu ze sobą tworzą one uderzający kontrast.

Kolory analogiczne

Znajdują się one w sąsiedztwie. Zwykle wyglądają bardzo podobnie, nie wzbudzając przy tym szoku uderzeniowego. Dzięki takiemu zestawieniu wzbudzamy zaufanie wśród odwiedzających.

 

ZNACZENIA POSZCZEGÓLNYCH BARW W PRAKTYCE

Tak jak wspomniałem wcześniej, liczy się pierwsze wrażenie, które wywołamy przy odwiedzaniu naszej witryny. Jeśli odpowiednio pokierujemy sprawami graficznymi, mamy zwiększone szanse na to, że internauta powróci do nas lub poleci naszą stronę wśród swoich znajomych. Każdy odcień mówi co innego. Warto jest znać przynajmniej podstawowe informacje, zanim rozpoczniemy zabawę z projektowaniem stron www.

Czerwony

Wiąże się głównie z odczuwaniem odwagi i silnych emocji. Czerwień to również miłość, siła, moc, zdolność przewodzenia. Należy jednak zapamiętać również, że może wywołać negatywne skojarzenia, typu: krew, śmierć, niebezpieczeństwo.

Niebieski

Oznacza spokój, cierpliwość, zaufanie, stabilność. Jeden z najbardziej lubianych kolorów na stronach www. Pokazuje profesjonalizm oraz perfekcyjne podejście do klienta.

Żółty

Jest to kolor najczęściej związany z życiem. Energiczny, dający poczucie szczęścia. Ponadto kojarzy się z zabawą, radością, inteligencją i jasnością.

Pomarańczowy

Jest odzwierciedleniem radości i kreatywności (wskazane przy budowie portfolio). Może to być również związane z życzliwością, zaufaniem i odwagą.

Fioletowy

Powszechnie kojarzy się z władzą, szlachetnością i bogactwem, mądrością i luksusem. Tę barwę możemy stosować również kiedy chcemy wzbudzić efekt tajemniczości.

Zielony

Pokazujący harmonię, naturę, zdrowie i życie. Ponadto warto powiązać go z pieniędzmi, wykorzystując przy tworzeniu stron, które mają na siebie zarabiać.

Brązowy

Jest to odcień relaksu i zaufania. Brązowy jest oznaką komfortu, niezawodności i profesjonalizmu. Dobrze powiązać go z tradycją i dobrym podejściem do klienta.

Szary

Daje poczucie powagi i tradycjonalizmu. Może powodować uczucie czystości i niewinności. Jest związany z bezpieczeństwem, niezawodnością, skromnością i perfekcjonalizmem. W połączeniu z pomarańczowym oddaje doskonałą harmonię.

Różowy

Wyraża czułość, romantyzm, kobiecość, prawdę, opiekę, miłość, dojrzałość emocjonalną oraz delikatność. Warto wykorzystać ten kolor przy projektowaniu witryny salonów urody etc.

Czarny

To stylowy i elegancki kolor związany głównie z władzą i wyrafinowaniem. Czarny najlepiej ze wszystkich doda efekt tajemniczości w Twoich projektach. Warto wykorzystać go podczas budowania portfolio graficznego.

Biały

Biały jest związany z czystością, prostotą i niewinnością. Najlepszy aby pokazać minimalistyczne podejście do formy graficznej, przy jednoczesnym zachowaniu profesjonalizmu.

 

WNIOSKI – KOŃCOWE PODSUMOWANIE

Na koniec przedstawiam Wam kilka przydatnych rad, które pomogą zapanować nad natłokiem kolorystycznych wariacji.

  1. Stosuj barwy, które łatwo pozwolą odczytywać zawarte na stronie treści
  2. Nie rób ze swojej witryny ‚cyrku’. Używaj bardziej stonowanych odcieni.
  3. Nie twórz monotonnych projektów. Wykorzystuj kilka kolorów.
  4. Jeśli masz problemy z doborem, wykorzystuj inne profesjonalne narzędzia, np. Adobe Kuler

Mam nadzieję, że artykuł będzie pomocny, w szczególności początkującym.

komentarze 2

  • Awatar
    SylveK

    21 października 2013 09:42

    „Istnieją trzy podstawowe kolory: czerwony, żółty i niebieski. Nie uzyskamy ich przez zmieszanie innych kolorów.”

    — jak to nie? przecież żółty (#FF0) uzyskasz z połączenia czerwonego i zielonego. RGB – red, green, blue – i z tych trzech uzyskasz pozostałe

    Odpowiedz
    • Awatar
      Michał Kortas

      21 października 2013 11:31

      Oczywiście mój błąd. Powinno być „czerwony, ZIELONY i niebieski”. Dziękuję za uwagę.

      Odpowiedz

Zostaw odpowiedź