To kolejny wpis z cyklu „Czy możesz mieć ładną stronę, nie będąc graficzką/grafikiem?”. Poprzedni był o logo. Jeśli go przegapiłaś_eś, to zajrzyj tu: Logo – czy dasz radę bez grafika? Tym razem zajmę się paletą kolorów na stronie.
Wybór kolorów pozwala trochę odpocząć głowie od trudniejszych tematów technicznych, ale – jak wszystkie kwestie wizualne – daje nam niezliczone możliwości wyboru. Dlatego, paradoksalnie, często to właśnie takie pozornie błahe kwestie jak kolory czy fonty wpędzają nas w prokrastynację i wstrzymują z robieniem strony.
Dlatego wskażę Ci kilka zasad i narzędzi, które pozwolą ogarnąć temat palety kolorów na stronie bez zbędnego hamletyzowania 🙂
1. Wybierając kolory na stronę stosuj plan minimum
Tak, wiem, my ciągle o tym planie minimum, ale to naprawdę DZIAŁA 🙂
Wybierając kolory do palety pamiętaj, że na start optymalne są cztery:
- do fontów (tu najlepiej bardzo ciemny, zbliżony do czarnego),
- wyróżniający (np. do przycisków), najlepiej dość intensywny, zwracający uwagę i ciepły,
- drugi wyróżniający, zbliżony do pierwszego, ale delikatnie jaśniejszy (np. do przycisków po najechaniu myszką) i
- jakiś jasny, w miarę neutralny, np. odcień beżu czy szarości, do tła – zwróć uwagę, że na stronach często wymiennie używa się białego i jakiegoś innego jasnego koloru do tła.
2. Miej z tyłu głowy, że kolory na stronie zawsze można zmienić
Nie stresuj się, że gdy raz wybierzesz, to tak będzie musiało być na zawsze. W WordPressie z łatwością dodasz lub usuniesz nowy kolor z palety albo nawet zmienisz całą paletę, gdy będzie taka potrzeba. Strony na WordPressie można zbudować tak, że nie trzeba będzie zmieniać koloru każdego przycisku czy akapitu pojedynczo. Nowe kolory można wprowadzić systemowo. Dlatego naprawdę nie jest to uciążliwe i nie zajmuje dużo czasu.
3. Sprawdź kolor, który Ci się podoba
Aby stworzyć paletę, potrzebujemy jakiegoś punktu wyjścia. Czasem bywa tak, że podoba nam się kolor zastosowany na innej stronie. To może być dobry trop. Możemy go wykorzystać jako punkt wyjścia do stworzenia własnej palety. Ale jak się za to zabrać w praktyce?
Po pierwsze, musisz wiedzieć, że każdy kolor ma przypisany swój identyfikator, który pozwala „zobaczyć” go komputerom. Np. czarny to #000000, a biały #ffffff.
Jak zdobyć kod konkretnego koloru, który wpadł Ci w oko?
Służą do tego proste narzędzia, które możemy zainstalować na naszym komputerze jako rozszerzenia do przeglądarki: ColorZilla albo EyeDropper (tutaj do Chrome’a).
Wyposażona_y w jedno z tych narzędzi szybko sprawdzisz, jaki kod ma kolor, który Ci się podoba. Będzie on mógł być punktem wyjścia do tworzenia palety.
4. Stwórz paletę kolorów na bazie logo lub zdjęcia
To rozwiązanie alternatywne dla poprzedniego punktu. Jest dla osób, które mają już logo albo zdjęcia na stronę. Mogą one na ich podstawie stworzyć gotową paletę kolorów. Służy do tego to narzędzie: Canva Color Palette Generator.
Nawet jeśli nie spodobają Ci się wszystkie kolory z tej palety, to jest duże prawdopodobieństwo, że wybierzesz przynajmniej jeden kolor i na jego podstawie stworzysz własną paletę. O tym w kolejnym punkcie.
5. Stwórz paletę kolorów na bazie jednego koloru
Gdy będziesz mieć jeden kolor wyróżniający, wszystko pójdzie łatwiej. W internecie znajdziesz wiele narzędzi, które podpowiedzą Ci, jak stworzyć paletę na bazie jednego koloru. Tutaj pokażę Ci jedno z nich: Coolors.
Wystarczy, że wybierzesz w menu zakładkę „More”, a następnie „Color picker” i wpiszesz tam kod swojego koloru, żeby dostać mnóstwo inspiracji na paletę z jego udziałem.
Przypominam, że na start potrzebujemy odrobinę jaśniejszej wersji koloru wyróżniającego oraz bardzo ciemnego koloru do fontów i jasnego do tła (do stosowania wymiennie z białym).
Wszystkie potrzebne nam kolory znajdziemy wśród różnych odcieni naszego bazowego koloru. Jeszcze tylko uwaga do ciemnego – pamiętaj, żeby nie wybierać idealnie czarnego koloru. Dlaczego? Bo czarny-czarny kolor nie występuje naturalnie w przyrodzie i dlatego ludzkie oko zawsze traktuje go nieco podejrzliwie 🙂 Więc na stronie może być kolor bardzo zbliżony do czarnego, ale nie całkowicie czarny. Pokażę Ci, jak to może wyglądać na przykładowym kolorze bazowym.
Na koniec pokażę Ci przykłady stron z ciekawą paletą kolorystyczną zbudowane razem z WP dla zielonych. Obie kursantki poszły trochę odważniejszą ścieżką niż ta, którą proponuję w tym wpisie. Bo obie mają dwa, a nie jeden, kolory wyróżniające. A jednak wybrały je w punkt, mimo że żadna z nich nie jest graficzką.
Na stronie Natalii mamy granat i bordo:
U Ady dla odmiany żółty i czarny: