Logo i jego warianty
Znak podstawowy, wersja skrócona, wersje monochromatyczne i na ciemnym tle, z określeniem rozmiarów, poniżej których każda z nich przestaje działać. Pliki wektorowe i rastrowe z prostą instrukcją, co gdzie wstawić.
Identyfikacja wizualna i strona
Identyfikacja wizualna i strona internetowa jako jeden system
Większość identyfikacji wizualnych powstaje w prezentacji, a potem trafia do kogoś, kto buduje stronę, i tam po cichu się rozpada. Projektuję identyfikację i stronę razem, więc logo, kolory, typografia i ton są sprawdzane w miejscu, w którym marka pracuje najczęściej: na Waszych własnych podstronach.
- Logo i księga znaku
- System kolorów i typografii
- Strona zbudowana na tym
Co obejmuje
Identyfikacja to zestaw decyzji, nie plik z logo.
Każdy z elementów poniżej ma przetrwać zderzenie z prawdziwą stroną, prawdziwą ofertą handlową i prawdziwym postem na LinkedIn, nie tylko z moodboardem.
Kolory i typografia
Paleta ze sprawdzonym kontrastem tekstu na ekranie i para krojów dobrana najpierw pod stronę, żeby nagłówki i akapity wyglądały tak samo w księdze znaku i w przeglądarce.
Księga znaku
Krótki dokument: użycie znaku, pole ochronne, role kolorów, skala typografii, kierunek zdjęć i kilka rzeczy, których nie robić. Pisany dla osoby, która zrobi następny slajd, nie dla jury konkursu.
Strona internetowa
Identyfikacja staje się żywym systemem w Figmie, a potem stroną w Webflow albo Astro. Każda decyzja z listy wyżej jest tu sprawdzana, zanim księga znaku zostanie uznana za gotową.
Dlaczego razem
Marka pracuje na stronie, więc strona powinna kształtować markę.
Identyfikacja projektowana osobno jest optymalizowana pod prezentację. Projektowana razem ze stroną, jest optymalizowana pod to, co klient naprawdę zobaczy.
Krój sprawdzany w rozmiarze akapitu
Font, który wygląda charakterystycznie przy 120 px na slajdzie, bywa nieczytelny przy 17 px w akapicie. Wybór na prawdziwych tekstach strony oszczędza drugą rundę decyzji o typografii sześć tygodni później.
Kolory sprawdzane pod kontrast
Kolory marki muszą działać jako tekst na tle, jako przyciski i jako linki. Paleta wybrana bez tej kontroli daje stronę z szarym kolorem firmowym, o który nikt nie prosił.
Znak sprawdzany w nagłówku strony
Logo żyje w nagłówku o wysokości 48 px znacznie częściej niż na billboardzie. Wersję skróconą projektuję na początku, nie wyprowadzam jej na końcu.
Jedna osoba, nic nie ginie w przekazaniu
Gdy projektant i wykonawca strony to ta sama osoba, między księgą znaku a kodem nic nie znika. Zasady z dokumentu są zasadami w CSS.
Ścieżki współpracy
Trzy punkty wyjścia, jeden cel.
Identyfikacja, potem strona
Najpierw pozycjonowanie, potem znak, system i księga, na końcu strona zbudowana na tym wszystkim. Najbardziej spójna ścieżka i ta, w której identyfikacja przechodzi najtrudniejszy test.
Odświeżenie, potem strona
Macie logo, którego nie chcecie stracić. Zostawiam znak, buduję wokół niego system od nowa (kolory, typografia, odstępy, zdjęcia) i daję stronie spójność, której stara księga znaku nigdy nie wyprodukowała.
Księga znaku i system dla Waszego developera
Gdy stronę buduje ktoś inny, dostajecie identyfikację plus bibliotekę w Figmie z komponentami, które już ją stosują. Przekazanie to system, nie PDF.
Jak to przebiega
Pięć kroków od pozycjonowania do strony, która używa marki.
- 01
Pozycjonowanie
Dla kogo jest firma, co robi lepiej i jaki ton z tego wynika. Spisane na jednej stronie i zatwierdzone, zanim cokolwiek zostanie narysowane.
- 02
Kierunek
Dwa lub trzy kierunki znaku i systemu, pokazane na prawdziwych zastosowaniach: nagłówku strony, okładce oferty, poście w social mediach. Nie na czarnym tle z reflektorem.
- 03
System
Wybrany kierunek staje się pełnym systemem: warianty logo, paleta z rolami kontrastu, skala typografii, odstępy i kierunek fotografii.
- 04
Strona
System staje się projektem w Figmie, a potem wdrożeniem. To, co nie przetrwa tego kroku, wraca do systemu, a nie do przypisu.
- 05
Księga znaku i pliki
Dokument powstaje na końcu, z tego, co się sprawdziło. Pliki trafiają w formatach, których wymaga każde zastosowanie, z nazwami, które zespół marketingu odnajdzie.
Uczciwe granice
Czym ta usługa nie jest.
To nie naming, nie strategia marki i nie kampania
Pozycjonowanie piszę jako brief do projektu, nie jako produkt doradztwa strategicznego. Jeśli nazwa firmy jest jeszcze otwarta albo pozycja na rynku nieustalona, ta praca idzie pierwsza i powiem o tym wprost, zamiast projektować wokół luki.
Najczęstsze pytania
Co warto wiedzieć przed startem?
Czy identyfikacja wizualna jest potrzebna przed stroną?
Potrzebne są decyzje o znaku, kolorach, typografii i tonie, zanim da się dobrze zaprojektować stronę. Czy to pełny projekt identyfikacji, czy odświeżenie tego, co jest, zależy od tego, ile z obecnej marki chcecie zachować. Obie drogi są tutaj; strona jest testem w każdej z nich.
Co wpływa na cenę identyfikacji wizualnej?
Liczba zastosowań, które identyfikacja ma objąć, to, czy zostaje istniejący znak, ile kierunków chcecie zobaczyć, i czy strona jest częścią zakresu. Identyfikacja ze stroną kosztuje więcej niż każda z osobna i mniej niż kupienie ich u dwóch wykonawców, którzy potem muszą się dogadać.
Czy możesz odświeżyć nasze logo zamiast je wymieniać?
Tak, i często to lepsza decyzja. Rozpoznawalność drogo się odbudowuje. Odświeżenie zostawia znak, naprawia to, co psuje się w małych rozmiarach, i buduje wokół niego system, którego za pierwszym razem prawdopodobnie nikt nie dokończył.
Jakie pliki dostaniemy?
Wersje wektorowe i rastrowe każdego wariantu logo, wartości kolorów do ekranu i druku, pliki fontów albo licencje, księgę znaku w PDF i bibliotekę w Figmie. Jeśli stronę buduje developer, biblioteka w Figmie jest przekazaniem.
Czy marka zadziała na LinkedIn, w ofertach i na slajdach, nie tylko na stronie?
Do tego jest księga znaku. Jest pisana dla osoby, która robi następny slajd albo post, z przykładami każdego zastosowania. Strona idzie pierwsza, bo jest najtrudniejszym testem, nie dlatego, że jest jedynym użyciem.
Źródła
Na czym opieram te informacje
Źródła wspierają kontrolę kontrastu i sposób deklarowania logo wyszukiwarkom; nie dowodzą wyników projektów AMS Digital.
- Web Content Accessibility Guidelines overview
W3C Web Accessibility Initiative · Sprawdzono 2026-07-19
Standard wykorzystany przy sprawdzaniu semantyki, obsługi klawiaturą, kontrastu i responsywności.
- Organization structured data
Google Search Central · Sprawdzono 2026-09-17
To jedno ze źródeł, z których korzystałem podczas przygotowania tej strony.
Co dalej
