Kolory i fonty na stronie – jak wybrać spójny styl bez księgi znaku

Księgę znaku mają zwykle duże marki: grube opracowanie z zasadami użycia logo, kolorów, fontów i zdjęć. Mała firma ma najczęściej logo zaprojektowane kilka lat temu, szyld nad wejściem, wizytówki z drukarni i może oklejony samochód. To wystarczający materiał, żeby zbudować spójny styl strony. Trzeba tylko go uporządkować.

Spójność nie jest kwestią gustu. Strona, na której każdy przycisk ma inny kolor, a nagłówki są pisane trzema różnymi krojami, wygląda na składaną w pośpiechu. Klient nie musi umieć nazwać problemu, żeby go odczuć.

Zacznij od tego, co już masz

Zanim wybierzesz cokolwiek nowego, zbierz istniejące materiały: plik logo (najlepiej w wersji wektorowej, np. PDF, SVG lub AI), zdjęcie szyldu, wizytówkę, ulotkę, zdjęcia wnętrza. Kolory, które się w nich powtarzają, to Twoja baza.

Jeśli nie znasz dokładnych kodów kolorów z logo, zapytaj osobę, która je projektowała, albo drukarnię, która drukowała wizytówki. Kolor w druku i na ekranie zapisuje się inaczej, więc przy przenoszeniu na stronę często trzeba go lekko skorygować – to normalne.

Nie wszystko musi przejść na stronę. Logo zaprojektowane w czterech jaskrawych kolorach nie oznacza, że strona ma wyglądać jak tęcza. Wybierz jeden kolor z logo jako główny, a resztę traktuj jako dodatki.

Jeśli nie masz logo albo nie jesteś z niego zadowolony, punktem wyjścia mogą być wnętrze gabinetu, kolor ścian w salonie, odzież robocza ekipy czy materiały, z którymi pracujesz. Strona, która kolorystycznie przypomina miejsce, do którego klient potem przychodzi, buduje spójne wrażenie bez żadnych dodatkowych zabiegów.

Prosta paleta: pięć ról zamiast dziesięciu kolorów

Łatwiej myśleć o kolorach przez ich funkcję niż przez odcienie. Na stronie małej firmy wystarczy pięć ról:

1. Kolor główny – kojarzony z firmą, używany w nagłówkach, stopce, elementach graficznych.
2. Kolor akcentu – zarezerwowany dla przycisków i najważniejszych linków. Klient uczy się, że ten kolor oznacza „tu kliknij”.
3. Kolor tekstu – bardzo ciemny szary lub granat, rzadziej czysta czerń.
4. Tła – biel i jeden–dwa bardzo jasne odcienie do oddzielania sekcji.
5. Kolory komunikatów – czerwień dla błędów w formularzu, zieleń dla potwierdzeń.

Przykładowe zestawienia, opisane słowami: dla gabinetu fizjoterapii granat jako kolor główny i ciepły pomarańcz jako akcent; dla firmy budowlanej grafit i żółć, jak na kasku i maszynach; dla gabinetu kosmetologicznego przygaszony róż w tłach i ciemna oliwka w tekstach oraz przyciskach. To tylko inspiracje. Nie istnieje jeden „kolor zaufania” ani „kolor zdrowia”, który zadziała w każdej firmie.

Kolor musi przejść test czytelności

Ładny kolor nie zawsze nadaje się do tekstu. Jasna zieleń, żółć czy błękit z logo często są zbyt jasne, żeby pisać nimi na białym tle albo umieszczać na nich biały napis. Wytyczne dostępności WCAG określają minimalny kontrast między tekstem a tłem, a w praktyce sprawdza się go darmowymi kalkulatorami kontrastu. Przykład: biały napis na popularnej, jasnej zieleni w odcieniu #4CAF50 ma kontrast około 2,8:1, czyli za mało dla zwykłego tekstu. Ten sam napis na ciemniejszej zieleni #2E7D32 osiąga ponad 5:1 i spełnia wymagania.

Rozwiązanie jest zwykle proste: jasny kolor z logo zostaje w elementach dekoracyjnych, a w przyciskach i tekstach pojawia się jego ciemniejsza wersja. Więcej o kontraście, wielkości liter i długości wiersza piszemy we wpisie o czytelności tekstu na stronie.

Fonty: dwa kroje to zwykle maksimum

Na stronie małej firmy wystarczy jeden krój pisma w kilku grubościach albo dwa: jeden do nagłówków, drugi do tekstu. Trzeci i kolejne zwykle wprowadzają chaos, a do tego spowalniają wczytywanie strony.

Na co zwrócić uwagę przy wyborze:

• Polskie znaki. Sprawdź ą, ć, ę, ł, ń, ó, ś, ź, ż – także wielkie litery – w każdej grubości, której chcesz używać. Niektóre fonty mają polskie znaki tylko w części odmian albo wyglądają one jak doklejone.
• Czytelność tekstu. Do dłuższych akapitów wybierz spokojny krój o wyraźnych literach. Fonty ozdobne, odręczne czy bardzo wąskie zostaw na logo albo pojedyncze hasła.
• Licencja. Fontu zainstalowanego na komputerze nie zawsze wolno osadzić na stronie internetowej. Bezpiecznym wyborem są kroje z otwartymi licencjami, np. z biblioteki Google Fonts, gdzie większość fontów udostępniono na licencji SIL Open Font License.
• Sposób wczytywania. Fonty można umieścić na własnym serwerze strony. To zwykle szybsze i sprawia, że przeglądarka odwiedzającego nie łączy się w tym celu z serwerami zewnętrznej firmy.

Szeryfowy czy bezszeryfowy? Na ekranach dobrze sprawdzają się oba rodzaje. Kroje szeryfowe (z „ogonkami” na końcach liter) często kojarzą się bardziej klasycznie i sprawdzają się np. w kancelarii czy u architekta. Bezszeryfowe wydają się prostsze i bardziej współczesne. Ważniejsze od tej decyzji jest konsekwentne trzymanie się wyboru.

Spisz zasady na jednej kartce

Zamiast księgi znaku przygotuj ściągę stylu – jeden dokument, który dostanie każdy, kto robi coś dla Twojej firmy: grafik od ulotek, osoba prowadząca media społecznościowe, wykonawca strony. Powinny się w nim znaleźć:

• logo w wersji kolorowej, jednobarwnej i na ciemne tło,
• kody kolorów z opisem roli każdego z nich,
• nazwy fontów i ich grubości dla nagłówków i tekstu,
• wygląd przycisku głównego i pomocniczego,
• dwa–trzy zdjęcia pokazujące, jaki styl fotografii pasuje do firmy.

Taka ściąga przydaje się też przy przygotowaniu materiałów do nowej strony. Pełną listę tego, co warto zebrać przed rozpoczęciem projektu, znajdziesz w tekście o tym, jak przygotować materiały do strony.

Kolejność decyzji

1. Zbierz logo, wizytówki, zdjęcia szyldu i wnętrza.
2. Wybierz kolor główny i jeden kolor akcentu.
3. Sprawdź kontrast przycisków i tekstów, w razie potrzeby przyciemnij kolory.
4. Wybierz jeden lub dwa fonty z polskimi znakami i odpowiednią licencją.
5. Zapisz wszystko na jednej stronie i trzymaj się tego w każdym kolejnym materiale.

Spójny styl nie wymaga dużego budżetu. Wymaga kilku decyzji podjętych raz i konsekwencji w ich stosowaniu.