Po co w ogóle standaryzować ikony i ilustracje w księdze znaku
Ikony i ilustracje jako drugi język marki
Logo i kolorystyka są pierwszym, najbardziej oczywistym nośnikiem tożsamości wizualnej. Ikony i ilustracje to drugi język marki – używany znacznie częściej, szczególnie w prezentacjach, aplikacjach, interfejsach, ofertach, social media czy materiałach szkoleniowych. Jeśli ten język nie jest opisany, każdy „mówi” nim trochę inaczej.
Klient czy użytkownik nie analizuje świadomie, czy ikonka pochodzi z innej biblioteki, czy kreska ma 1,5 px, a nie 2 px. Odczuwa jedynie ogólny efekt: projekt wydaje się „składany z klocków”, niespójny, czasem tani. Kiedy system ikon marki jest dobrze opisany, odbiorca ma poczucie obcowania z jednym spójnym światem wizualnym, nawet jeśli materiały tworzy kilka różnych zespołów i dostawców.
Spójne ikony i ilustracje są szczególnie istotne tam, gdzie marka komunikuje złożone treści (np. SaaS, usługi B2B, edukacja). Ikony pełnią funkcję nie tylko ozdobną, ale też nawigacyjną i informacyjną. Chaos w ikonach często przekłada się na chaos w rozumieniu treści – użytkownik musi dodatkowo „tłumaczyć” sobie, co właściwie widzi.
Praktyczne korzyści: mniej poprawek, szybsze projekty, łatwiejsza współpraca
Porządny opis stylu graficznego ikon i ilustracji to w praktyce oszczędność czasu i pieniędzy. Dobrze przygotowany rozdział w brandbooku staje się gotowym briefingiem dla ilustratora, agencji UX czy freelancera. Zamiast prowadzić długie maile z poprawkami typu „trochę mniej kreskówkowo” albo „bardziej jak ta ikonka z landing page”, wysyłasz fragment księgi znaku z jasnymi zasadami i przykładami.
Efekty:
szybsze wdrożenie nowych grafików – nie muszą „uczyć się marki” przez miesiąc, mają konkretny przewodnik po ilustracjach i ikonach,
mniej iteracji – poprawki dotyczą zwykle treści i funkcji, a nie stylu,
większa przewidywalność – zamawiając 100 ikon od trzech różnych wykonawców, masz duże szanse dostać zbliżony rezultat,
łatwiejsza współpraca z drukarnią i domem mediowym – dokładnie wiadomo, które ilustracje mogą być użyte i jak,
możliwość delegowania – nie tylko „główny grafik” ogarnia styl, ale cała organizacja ma do niego dostęp w jednym miejscu.
W praktyce dobre standardy wizualne działają jak filtr: od razu widać, które materiały są „z rodziny”, a które są obce. W większych firmach to często decyduje, czy dział marketingu działa jak sprawna maszyna, czy jak straż pożarna gasząca kolejne „pożary graficzne”.
Konsekwencje braku spójności: efekt patchworku
Brak standaryzacji ikon i ilustracji prowadzi do zjawiska, które wiele marek boleśnie zna: strona internetowa, prezentacja czy aplikacja zaczyna wyglądać jak patchwork – zbiór elementów z różnych źródeł, stylów i bibliotek.
Typowe oznaki, że nie opisano systemu ikon marki w księdze znaku:
na jednej stronie widać ikony outline i solid, czasem z cieniem, czasem zupełnie płaskie,
część ilustracji jest izometryczna, część płaska, część mocno kreskówkowa,
niektóre piktogramy używają niebrandowych kolorów, „bo tak było w bibliotece”,
ikony w aplikacji mobilnej różnią się stylem od ikon na stronie www,
slajdy działów (sprzedaż, HR, product) wyglądają jak pochodzące z trzech różnych korporacji.
Na poziomie percepcji taki bałagan obniża wiarygodność. Skoro marka nie potrafi zachować porządku w własnych materiałach, czy faktycznie panuje nad procesami, finansami, produktem? Ten efekt jest podświadomy, ale realny. Często to właśnie niedookreślone zasady projektowania ikon są jednym z głównych winowajców.
Mit: „Wystarczy paleta kolorów, resztę grafik zrobi po swojemu”
Częste podejście: przesyłasz grafikowi logo, paletę kolorów i ewentualnie font. Oczekujesz spójnych materiałów. Po kilku dniach wraca projekt, w którym faktycznie użyto kolorów marki, ale grafiki „żyją własnym życiem”. Ilustracje bardziej przypominają styl innej, znanej marki niż Twojej.
Mit: „Jak damy te same kolory, to wszystko się wyrówna.”
Rzeczywistość: Kolor to tylko wierzchołek góry lodowej. O spójności decydują m.in. typ linii, proporcje postaci, poziom uproszczenia, perspektywa, sposób używania światła i cienia, charakter kształtów, gęstość detali, a nawet sposób rysowania dłoni czy twarzy. Bez opisania tych elementów paleta kolorów prędzej zamaskuje chaos, niż go wyeliminuje.
Paleta jest jak wykorzystanie tego samego tuszu w drukarce. Jeśli pliki wejściowe są z pięciu różnych źródeł, końcowy efekt wciąż będzie niespójny, tylko w tej samej gamie barw.
Miejsce rozdziału o ikonach i ilustracjach w księdze znaku
Rozdział o ikonach i ilustracjach nie powinien być „doklejką” pod koniec brandbooka. Styl ilustracji w brandbooku powinien logicznie wynikać z wcześniejszych części: strategii marki, logo, typografii i ogólnych zasad wizualnych.
Dobry układ:
Tożsamość i wartości marki.
Logo i jego warianty.
Paleta kolorów.
Typografia.
Styl zdjęć i layout.
System ikon i ilustracji – opis stylu, parametrów technicznych, przykładów poprawnych i błędnych.
Rozdział o ikonach i ilustracjach powinien regularnie odwoływać się do wcześniejszych zasad: przypominać, które kolory wolno stosować, jakich gradientów unikać, jak typografia współgra z ikonami w interfejsie. Nie jest to odrębny świat, lecz naturalne rozszerzenie języka wizualnego marki.
Źródło: Pexels | Autor: Markus Spiske
Fundament: jak styl ikon i ilustracji wynika z tożsamości marki
Przekład cech marki na cechy wizualne
Opis stylu ikon i ilustracji nie zaczyna się w Illustratorze, tylko w strategii marki. Aby język wizualny marki był spójny, trzeba przełożyć cechy marki na konkretne cechy wizualne.
Przykładowy schemat myślenia:
„Przyjazna” → miękkie, zaokrąglone kształty, brak ostrych kątów 90°, łagodne przejścia, uproszczenia zamiast technicznych detali.
„Ekspercka” → precyzyjne proporcje, czyste linie, symetria lub świadomie kontrolowana asymetria, brak przesadnie „komiksowych” uproszczeń.
„Innowacyjna” → niestandardowe kadrowanie, subtelne przełamania schematów (np. delikatna izometria), ale wciąż czytelne i funkcjonalne.
To połączenie daje konkretne instrukcje: jeśli marka jest „przyjazna i ekspercka”, można zapisać: „Ikony rysujemy z użyciem prostych, geometrycznych kształtów o zaokrąglonych narożnikach. Unikamy agresywnych ostrych kątów i mocnych deformacji postaci. Proporcje są realistyczne, ale uproszczone, bez przesadnych przerysowań.”
Takie wskazówki tworzą pomost między marketingiem a projektantem. Zamiast abstrakcyjnych haseł, grafik dostaje konkretne przekłady na język formy.
Synchronizacja stylu ikon z logo, typografią i zdjęciami
Ikony nie mogą żyć w izolacji od innych elementów systemu. Styl ikon i ilustracji powinien wyraźnie nawiązywać do logo, kroju pisma i stylu zdjęć. W przeciwnym razie marka będzie wyglądać jak „sklejona” z elementów różnych dostawców.
Przykłady dobrego dopasowania:
Logo oparte na prostokątach z zaokrąglonymi narożnikami → ikony budowane z podobnych kształtów, o powtarzalnym promieniu zaokrągleń.
Typografia z grubszymi, czytelnymi szeryfami → ikony o nieco masywniejszym outline, bez ultracienkich linii, aby zrównoważyć wagę tekstu.
Zdjęcia w stonowanych barwach, z mocnymi kontrastami → ilustracje i ikony o ograniczonej palecie kolorów, z wyraźnym kontrastem figur/tła.
Przykłady zgrzytów:
Eleganckie, minimalistyczne logo + neonowe, komiksowe ilustracje z grubym konturem i przerysowanymi minami postaci.
System UI z cienkimi liniami i dużą ilością białej przestrzeni + ikony w stylu 3D z gradientami i drop shadow.
W księdze znaku warto dosłownie odnieść się do tych powiązań, np.: „Ikony i ilustracje korzystają z tego samego promienia zaokrągleń, co logo. Grubość linii ikon odpowiada szerokości linii w sygnetcie.” Dla projektanta to sygnał, że cały system ma być zestrojony, a nie przypadkowy.
Proste ćwiczenie: trzy słowa o marce i ich graficzne odpowiedniki
Dobrym punktem wyjścia do opisu stylu jest krótkie ćwiczenie. Wybierz trzy słowa opisujące charakter marki, a następnie dopisz do każdego zestaw atrybutów wizualnych.
Przykład:
Nowoczesna → prosta geometria, brak ornamentów, brak efektów 3D, czysty flat lub lekka izometria, mało kolorów.
Stabilna → symetryczne kompozycje, równowaga w rozkładzie ciężaru, brak gwałtownych, skośnych linii dominujących kadr.
Na tej bazie w brandbooku możesz zapisać: „Ilustracje tworzą nowoczesny, ale ludzki świat. Używamy prostych, geometrycznych form, unikając efektów 3D. Linia jest równa i czysta, jednak pojawiają się delikatne zaokrąglenia i miękkie deformacje, nadające bardziej ludzkiego charakteru. Kompozycje są zrównoważone, bez przesadnych dynamicznych przerysowań.”
Tak sformułowane wytyczne są zrozumiałe zarówno dla stratega marki, jak i grafika, który ma zaprojektować ~50 nowych ikon czy serię ilustracji na blog.
Poziom „poważności” ilustracji w zależności od branży
Styl ilustracji musi pasować do wrażliwości odbiorcy i specyfiki branży. Bank, kancelaria prawna czy dostawca infrastruktury IT będzie komunikował się inaczej niż marka edukacyjna dla dzieci czy aplikacja rozrywkowa.
W księdze znaku opłaca się wprost nazwać poziom „poważności” ilustracji, np. poprzez krótką skalę:
Bardzo poważny – brak postaci rysunkowych, dominują abstrakcyjne formy, wykresy, schematy.
Wyważony – pojawiają się postacie, ale bez przesadnie komiksowego stylu; mimika jest stonowana, brak „przesłodzenia”.
Swobodny – postacie z nieco przerysowanymi proporcjami, uproszczone twarze, żywsza paleta kolorów.
Kreskówkowy – bardzo uproszczone sylwetki, intensywna ekspresja mimiczna, mocne deformacje.
Przykładowy zapis: „Ilustracje pozostają w strefie wyważonej. Używamy uproszczonych postaci, ale unikamy skrajnie komiksowych deformacji. Twarze mają uproszczoną mimikę, bez karykaturalnych min. Ten poziom powagi odpowiada komunikacji eksperckiej, ale przyjaznej.”
Taki opis chroni markę przed dryfem: gdy zmienią się agencje czy zespół, nowi dostawcy nie „pociągną” stylu zbyt mocno w stronę kreskówki lub przeciwnie – korporacyjnej sterylności.
Mit: „Nowoczesne ikony to zawsze cienkie linie i flat”
W wielu firmach utarło się przekonanie, że „nowoczesny styl ikon” oznacza cienki outline, flat i brak szczegółów. To skrót myślowy, który prowadzi do kopiowania tego samego schematu bez refleksji, czy pasuje do marki.
Mit: „Jeśli ikony są cienkie i płaskie, to na pewno wyglądają nowocześnie.”
Rzeczywistość: Nowoczesność wynika z dopasowania do kontekstu – technologii, produktu, potrzeb użytkownika. Grube, solidne ikony potrafią wyglądać współcześnie, jeśli są dobrze zaprojektowane i konsekwentnie użyte. Z drugiej strony, zestaw przypadkowych cienkich ikonek z internetu może wyglądać bardziej archaicznie niż przemyślany, lekko „retro” styl dopasowany do marki.
Dlatego w opisie stylu zamiast słowa „nowoczesne” lepiej użyć konkretnych pojęć: „outline 2 px”, „brak gradientów”, „geometria oparta na okręgach i kwadratach”, „paleta 3–4 kolorów” itd. To daje projektantowi jasne wytyczne zamiast pustych sloganów.
Źródło: Pexels | Autor: Walls.io
Kluczowe decyzje: rodzaj ikon i ilustracji, które trzeba jasno zadeklarować
Typy ikon a ich rola w systemie
Pod jedną etykietą „ikony” kryje się kilka zupełnie różnych funkcji. Jeśli ten podział nie zostanie opisany, każdy projektant będzie interpretował go po swojemu, a spójność rozjedzie się szybciej niż paleta kolorów.
Najczęściej w jednej marce pojawiają się:
Ikony systemowe / UI – małe symbole używane w interfejsie (menu, filtrowanie, zapis, pobieranie, powiadomienia). Tu liczy się przede wszystkim czytelność i przewidywalność.
Ikony funkcjonalne / produktowe – oznaczają konkretne funkcje, moduły, pakiety (np. „Finanse”, „HR”, „Analityka”). Często bywają większe, mogą mieć więcej detalu niż ikony UI.
Ikony infograficzne – wspierają wykresy, diagramy, slajdy sprzedażowe. Zazwyczaj bardziej rozbudowane, ale nadal uproszczone.
Piktogramy – oznaczenia kierunkowe, BHP, nawigacja w przestrzeni fizycznej. Tu nadrzędna jest uniwersalność i zrozumiałość także bez tekstu.
W brandbooku dobrze jest dosłownie nazwać te kategorie i dodać krótkie opisy, np.: „Ikony systemowe – tylko outline, maksymalny rozmiar 24×24 px, brak wypełnień kolorem. Ikony produktowe – outline + jedno pole wypełnione kolorem z palety akcentów, rozmiar minimum 48×48 px.”
Mit w wielu firmach jest prosty: „Ikona to ikona, jakoś to będzie.” Rzeczywistość jest taka, że brak tego podziału kończy się sytuacją, w której ikona „Zaloguj się” wygląda niemal tak samo jak ikona całego modułu „Panel klienta”, bo nikt nie narysował między nimi czytelnej granicy.
Ikony monoline, wypełnione, dwutonowe – wybór, który trzeba nazwać
Jedną z ważniejszych decyzji jest poziom „masy” ikony. Tu nie wystarczy lakoniczne „cienkie linie”. Trzeba jasno zapisać, z jakim typem ikon marka się identyfikuje.
Monoline (outline) – ikony zbudowane wyłącznie z linii o tej samej grubości, bez wypełnień. Czytelne i uniwersalne, dobrze działają w interfejsach.
Solid (wypełnione) – ikony jako zwarte plamy. Sprawdzają się przy małych rozmiarach, w sytuacjach o niskim kontraście tła, ale są wizualnie cięższe.
Dwutonowe / „duotone” – łączą outline z jednym lub dwoma polami wypełnionymi kolorem. Dają więcej charakteru, ale łatwiej o chaos, jeśli nie ustanowi się zasad.
W księdze znaku można zapisać na przykład: „Podstawowy styl ikon to monoline. W komunikacji marketingowej dopuszczamy wariant duotone, w którym wypełnienie zajmuje maksymalnie 30% powierzchni ikony i używamy wyłącznie kolorów akcentowych: Niebieski Akcent i Zielony Akcent.”
Mit: „Weźmiemy paczkę darmowych outline’ów, a jak będzie trzeba, to je trochę wypełnimy.” Rzeczywistość: outline rysowane byłymi praktykantami z różnych serwisów stockowych różnią się diametralnie podejściem do geometrii, promienia narożników czy proporcji. Jeśli brandbook nie określi bazowego modelu, każda nowa partia ikon będzie wprowadzać inny „dialekt” graficzny.
Poziom szczegółowości – ile detalu to już za dużo
Ikona, która dobrze wygląda w podglądzie 400% w Illustratorze, często rozpada się na ekranie telefonu. Dlatego trzeba określić nie tylko styl, ale również gęstość informacji, jaką ikona może zawierać.
Praktyczny sposób opisu:
Określ maksymalną liczbę elementów w ikonach (np. „jedna główna forma + maksymalnie dwa drobne detale pomocnicze”).
Dodaj ilustrację porównawczą: ta sama ikona w wersji „za bardzo szczegółowej” i dopuszczalnie uproszczonej, z krótkim podpisem, co zostało usunięte.
Wskaż minimalny rozmiar użycia (np. „Ikony nie mogą być używane poniżej 16×16 px; przy 16 px rezygnujemy z detali wewnętrznych”).
Dobrze jest też odnieść się do proporcji detali względem grubości linii: „Wszelkie wewnętrzne przerwy i szczeliny w ikonie nie mogą być mniejsze niż 1× grubość linii, aby uniknąć zlewania się elementów w małych rozmiarach.”
Ilustracje: scenki, metafory, abstrakty – co jest „dozwolone”
Ilustracje mają większą swobodę niż ikony, ale to właśnie dlatego potrafią rozbić spójność, jeśli nikt nie określi ram. W brandbooku wskazane jest precyzyjne nazwanie rodzajów ilustracji i sytuacji, w których się pojawiają.
Zwykle w marce występują:
Ilustracje scenkowe – pokazujące ludzi, środowiska, sytuacje (np. „spotkanie zespołu”, „klient korzystający z aplikacji”). Budują emocje i „ludzkość” marki.
Ilustracje metaforyczne – obrazujące pojęcia abstrakcyjne („bezpieczeństwo”, „rozwój”, „automatyzacja”) za pomocą prostych, symbolicznych form.
Ilustracje abstrakcyjne / tła – geometryczne kompozycje, patterny, używane jako tła na slajdach, w nagłówkach artykułów, na landing page’ach.
Opis może wyglądać tak: „W komunikacji produktowej stosujemy głównie ilustracje scenkowe z uproszczonymi postaciami. Dla bardziej abstrakcyjnych treści (np. teksty eksperckie, whitepapery) korzystamy z ilustracji metaforycznych i abstrakcyjnych, bez postaci, opartych na prostych kształtach zaczerpniętych z logo.”
Tu również pojawia się typowy mit: „Do bloga bierzemy po prostu ilustracje z jakiegoś stocka, byle kolorystycznie pasowały.” Rzeczywistość: pięć różnych stylów postaci i cieniowania w ciągu dwóch miesięcy buduje wrażenie, że każdy artykuł robiła inna firma, a marka traci rozpoznawalny charakter.
Postacie w ilustracjach: ile „człowieka” w marce
Jeśli w systemie są postacie, trzeba je potraktować jak pełnoprawny element identyfikacji, nie jak przypadkowe „ludziki” z banku ilustracji. Dobrze jest odpowiedzieć na kilka konkretnych pytań i zapisać to wprost:
Proporcje – czy sylwetki są realistyczne, czy nieco przerysowane (np. większe głowy, wydłużone kończyny)?
Rysy twarzy – pełne twarze z oczami i mimiką, czy raczej uproszczone (np. tylko oczy i usta, brak szczegółów)?
Zróżnicowanie – jak pokazujemy różnorodność (wiek, płeć, niepełnosprawności), jednocześnie nie zamieniając każdej scenki w manifest?
Poziom ekspresji – jakie emocje są dopuszczalne (spokój, satysfakcja, lekka radość) i gdzie stawiamy granicę (brak karykaturalnie szerokich uśmiechów, brak skrajnego dramatyzmu)?
Przykładowy zapis: „Postacie mają nieco powiększone głowy względem ciała (ok. 1:6), co nadaje przyjazny charakter, ale nie są skrajnie kreskówkowe. Twarze są uproszczone – oczy i usta, bez rysowania nosa i szczegółowych brwi. Pokazujemy zróżnicowanie wiekowe i kulturowe na poziomie fryzur, kolorów skóry i sylwetek.”
Takie ustalenia sprawiają, że kiedy za dwa lata nowy zespół zamówi kolejną serię ilustracji, nadal będzie można rozpoznać „tych samych ludzi”, a nie zupełnie nowy świat wizualny.
Relacja ilustracji do treści – co ilustrujemy dosłownie, a co metaforycznie
Jeden z częstych problemów to „ilustracje do wszystkiego”, które w praktyce nie ilustrują niczego konkretnego. Pomaga prosta reguła zapisana w księdze znaku: co pokazujemy wprost, a co tylko symbolicznie.
Przykładowo:
Treści stricte instruktażowe (tutoriale, help center) → ilustracje bardziej dosłowne: zrzuty ekranów uproszczone graficznie, prosty schemat krok po kroku.
Treści wizerunkowe, strategiczne → ilustracje metaforyczne (np. uproszczone drogi, mosty, wzrosty wykresów), aby nie „przepisywać” treści 1:1.
Treści sprzedażowe → miks: metaforyczne ujęcie korzyści + jedna konkretna scenka z użytkownikiem produktu.
W praktyce można dodać dwa–trzy przykłady z podpisem: „Za abstrakcyjna ilustracja do tematu X – nie stosujemy” i „Właściwy poziom dosłowności” przy tym samym artykule. Projektant dostaje sygnał, do jakiego poziomu może „odpłynąć”.
Siatka ikon: bazowy rozmiar i marginesy bezpieczeństwa
Bez siatki ikony mogą wyglądać poprawnie pojedynczo, ale w zestawie zaczną „skakać”: raz będą optycznie cięższe, raz lżejsze, raz zbyt blisko krawędzi. Siatka jest po to, by ujednolicić proporcje i „ciężar” ikon.
W praktyce najpierw wybiera się bazowy rozmiar ikony – np. 16×16, 24×24, 32×32 px – zgodnie z tym, jakie rozmiary dominują w interfejsie lub materiałach drukowanych. Następnie ustala się:
Margines wewnętrzny – np. 2 px od każdej krawędzi, w którym nie rysuje się żadnego elementu ikony.
Strefę aktywną – obszar, w którym mogą pojawiać się główne kształty (np. 20×20 px w ramach ramki 24×24 px).
Orientację – czy ikony są projektowane w oparciu o piksel-perfect (wszystkie kluczowe linie na pełnych pikselach), czy dopuszczalne są półpiksele (rzadziej przy screenach).
Opis w księdze może być zwięzły: „Ikony projektujemy w siatce 24×24 px. Wewnątrz pozostawiamy margines bezpieczeństwa 2 px od każdej krawędzi. Wszystkie linie pionowe i poziome umieszczamy na pełnych pikselach, aby uniknąć rozmycia.”
Grubość linii: stała wartość i jej zależność od rozmiaru
Grubość linii w ikonach to częsty obszar rozjazdów. Jeden projektant użyje 1 px, drugi 1,5 px, trzeci 2 px – każdy „na oko”. W efekcie część ikon wygląda na cieńsze, część na bardziej „przyciężkie”.
Lepsze jest podejście systemowe:
Dla podstawowego rozmiaru (np. 24×24 px) wybierz jedną grubość (np. 2 px).
Określ skalowanie dla innych rozmiarów (np. 16×16 px → 1,5 px; 32×32 px → 2,5 px lub 3 px).
Zapisz preferencję zaokrągleń: czy grubość linii zawsze jest liczbą całkowitą, czy dopuszczasz ułamki (np. 1,5 px) i w jakich narzędziach (Figma, Sketch) to kontrolujesz.
Przykładowe sformułowanie: „Dla ikon 24×24 px stosujemy grubość linii 2 px. Dla 16×16 px – 1,5 px, a dla 32×32 px – 3 px. W ikonach outline wszystkie linie mają tę samą grubość, nie dopuszczamy kombinacji 1 px + 2 px w obrębie jednej ikony.”
Mit, który lubi się pojawiać: „Cieńsze zawsze znaczy bardziej eleganckie.” Rzeczywistość: zbyt cienkie linie na słabszych ekranach i przy niskim kontraście po prostu znikają, a ikona przestaje pełnić swoją funkcję. Dlatego brandbook powinien uwzględniać nie tylko estetykę, ale i warunki wyświetlania.
Narożniki: promień zaokrągleń jako część DNA marki
Zaokrąglenia to jeden z najbardziej niedocenianych parametrów. Tymczasem spójny promień narożników potrafi połączyć ikonę, logo i przyciski w interfejsie w jedną całość.
W księdze znaku dobrze jest wskazać:
Podstawowy promień narożników (np. 2 px), stosowany we wszystkich prostokątnych kształtach ikon.
Promień dla dużych form (np. 4 px dla większych plam tła, jeśli występują w ikonach lub ilustracjach).
Spójność z UI – „Promień narożników w ikonach i polach UI jest identyczny jak w przyciskach podstawowych – 4 px.”
W przypadku ikon opartych na kole warto dodać zasadę: „Koła w ikonach zawsze rysujemy jako idealne okręgi na siatce, nigdy jako ręcznie deformowane elipsy, chyba że jest to świadomy motyw ilustrujący ruch lub perspektywę.”
Kąty, osie i symetria: uporządkowana geometria
Nawet w pozornie prostych ikonach bardzo szybko pojawiają się linie ukośne. Jeśli każdy projektant ustawi je pod innym kątem (30°, 37°, 45°), cały zestaw zacznie wyglądać chaotycznie.
Spójność kątów i osi konstrukcyjnych
Geometria ikon powinna być tak samo świadoma, jak geometria logo. Dobrze jest z góry ustalić, z jakich kątów i osi w ogóle korzystasz, zamiast rysować „po skosie na oko”.
Praktyczne zasady, które da się wpisać w księgę znaku:
Zestaw dopuszczalnych kątów – np. tylko 0°, 45° i 90° albo 0°, 30°, 60°, 90°. Każda ukośna linia w ikonach korzysta z jednego z tych kątów.
Osie symetrii – czy ikony są projektowane głównie jako symetryczne względem osi pionowej/poziomej, czy dopuszczasz asymetrię jako element charakteru (np. „lekko przechylone” obiekty)?
Ustawienie względem siatki – czy ukośne elementy zawsze „dotykają” węzłów siatki, czy mogą delikatnie wychodzić poza, jeśli optycznie wyglądają lepiej.
Przykładowy zapis: „W ikonach stosujemy wyłącznie kąty 0°, 45° i 90°. Wszystkie kształty bazowe (strzałki, zaznaczenia, rogi kartek) budujemy na siatce 24×24 px, zachowując symetrię względem osi pionowej, chyba że ikonę świadomie przechylamy, aby zasugerować ruch.”
Częsty mit: „Użytkownik i tak tego nie zauważy.” Rzeczywistość: pojedynczej różnicy faktycznie nikt nie wypunktuje, ale zestaw kilkudziesięciu ikon z losowymi kątami buduje podskórne wrażenie bałaganu i „taniości” interfejsu.
Detale, wypełnienia i poziom uproszczenia
Ikony mogą być hiperproste lub drobiazgowo dopracowane. Problem pojawia się, gdy obie strategie mieszają się w jednym systemie. Raz ikona „folderu” ma dwa detale, raz siedem – trudno wtedy mówić o spójnym stylu.
Pomaga kilka prostych ograniczeń:
Maksymalna liczba elementów – np. „Jedna ikona nie zawiera więcej niż 3–4 niezależne kształty”.
Poziom uproszczenia – „Rysujemy tylko te szczegóły, które są niezbędne do rozpoznania obiektu. Nie dodajemy śrubek, faktur, refleksów.”
Konsekwencja w wypełnieniach – czy zestaw jest liniowy (outline), wypełniony (solid), czy hybrydowy (przy czym hybryda musi być jasno opisana, np. „tylko główny kształt wypełniony kolorem, detale liniowe”).
Można to opisać dosadnie: „Ikony projektujemy w stylu outline. Nie stosujemy cieni, gradientów ani faktur. Wypełnienia dopuszczalne są wyłącznie w ikonach stanu (np. ostrzeżenia), gdzie kolor tła komunikuje priorytet.”
Mit: „Im więcej detali, tym bardziej premium.” W praktyce na małych rozmiarach dodatkowe smaczki zlewają się w szare plamy, a ikona traci czytelność. Lepszy jest świadomie uproszczony, „oddychający” rysunek, który działa na 16×16 px i na 64×64 px.
Spójność między ikonami a ilustracjami
Ikony i ilustracje nie muszą wyglądać identycznie, ale powinny być z tej samej „rodziny”. Tu pomaga jasne określenie, co jest wspólne, a co się rozjeżdża:
Wspólna geometria – podobny stosunek prostych do zaokrągleń, ta sama logika promieni narożników.
Wspólna paleta – ikony korzystają z tego samego zestawu kolorów głównych, co ilustracje, choć w innych proporcjach (np. ikony głównie monochromatyczne, ilustracje bardziej kolorowe).
Wspólny poziom „miękkości” – jeśli ilustracje są bardzo organiczne i malarskie, ultra-techniczne, sztywno geometryczne ikony będą wyglądały jak z innego systemu.
Dobry zapis: „Ikony są uproszczoną, geometryczną wersją świata ilustracji. Korzystają z tych samych kolorów bazowych, ale maksymalnie z dwóch odcieni jednocześnie. Zaokrąglenia narożników odpowiadają promieniowi stosowanemu w ilustracjach scenkowych.”
W praktyce często pomaga jedna plansza w księdze znaku: ikony obok fragmentu ilustracji. Widać wtedy od razu, czy to jeden język, czy dwa różne dialekty.
Kolor i światło: jak opisać paletę i cieniowanie ikon/ilustracji
Paleta bazowa a paleta rozszerzona dla ilustracji
Logo zwykle ma 2–3 główne kolory. Ilustracje potrzebują więcej odcieni: skóry, tła, akcentów. To nie oznacza, że każdy grafik ma „dorysować” kolejne barwy według własnego gustu.
W księdze znaku warto rozdzielić dwa poziomy:
Paleta podstawowa – kolory powiązane bezpośrednio z logo i UI (primary, secondary, neutral).
Paleta ilustracyjna – dodatkowe odcienie, zdefiniowane jako warianty (np. 2–3 jaśniejsze i ciemniejsze tony głównych barw + neutralne beże, błękity tła).
Opis może być bardzo konkretny: „Ilustracje korzystają wyłącznie z kolorów zdefiniowanych w palecie brandowej i ilustracyjnej. Nowe odcienie mogą być dodawane wyłącznie przez zespół brand designu, nie powstają ad hoc przy pojedynczych zleceniach.”
Mit, który często wychodzi przy współpracy z zewnętrznymi ilustratorami: „To tylko jeden dodatkowy odcień niebieskiego.” Po dziesięciu takich „jednych odcieniach” marka ma już kilkanaście podobnych błękitów, a spójność palety znika.
Rola koloru w ikonach: funkcja kontra dekoracja
Ikony mogą pełnić funkcję czysto informacyjną albo jednocześnie dekoracyjną. W obu przypadkach kolor powinien być jasno zdefiniowany.
Dobrze jest rozróżnić co najmniej trzy sytuacje:
Ikony interfejsowe – najczęściej jednokolorowe, korzystają z koloru tekstu lub dedykowanego koloru „icon / stroke”. Stany (hover, disabled, error) opisujesz tak jak w systemie UI.
Ikony dekoracyjne – np. w nagłówkach artykułów, na slajdach. Można dopuścić 2–3 kolory, ale z konkretną hierarchią (jeden kolor dominujący, reszta jako akcenty).
Ikony statusów i alertów – ściśle powiązane z systemem kolorów: zielony dla sukcesu, czerwony dla błędu, żółty dla ostrzeżenia, niebieski dla informacji.
Przykładowe sformułowanie: „W interfejsie wszystkie ikony bazowe są jednokolorowe (kolor tekstu podstawowego). Nie stosujemy wielobarwnych ikon w komponentach UI. Ikony statusów wykorzystują odpowiednie kolory semantyczne, przy czym kształt ikony jest taki sam w całym systemie.”
W praktyce chroni to przed sytuacją, w której każda funkcja aplikacji zaczyna mieć „swoją” kolorową ikonkę i zamiast spójności powstaje kolorowy patchwork.
Kolor w ilustracjach: hierarchia i proporcje
Nawet przy dobrze zdefiniowanej palecie ilustracyjnej można przesadzić z ilością kolorów na jednej scenie. Zwykle lepiej sprawdza się prosty schemat: 2–3 kolory dominujące, reszta jako akcenty.
Dobrze działa też zasada „klucza kolorystycznego” dla różnych typów treści, np.:
Treści edukacyjne → więcej jasnych, neutralnych tła, kolory główne raczej w detalach.
Treści sprzedażowe → mocniejsze wykorzystanie koloru primary (np. na ubraniach postaci, głównych obiektach).
Treści techniczne → chłodniejsza paleta, ograniczenie ciepłych akcentów do 1–2 detali.
Zapis w księdze może być zaskakująco prosty: „W pojedynczej ilustracji nie używamy więcej niż 6 kolorów (łącznie z odcieniami skóry i tła). Jeden kolor dominuje, pozostałe pełnią funkcję akcentów.”
To brzmi jak ograniczenie, ale w praktyce pomaga ilustratorom podejmować szybkie decyzje i trzymać świat wizualny w ryzach.
Światło i cieniowanie: płasko czy przestrzennie
Drugi kluczowy element, obok samej palety, to sposób budowania światłocienia. Tu rozjazdy są wyjątkowo widoczne: obok siebie ląduje płaska, „flatowa” scenka i drobiazgowo cieniowana, prawie 3D postać.
Najpierw trzeba zdefiniować ogólny kierunek:
Styl płaski (flat) – brak tradycyjnego światłocienia, jedynie większe plamy koloru; ewentualnie delikatne różnice odcieni zamiast klasycznego „światło–cień”.
Styl z uproszczonym światłocieniem – jedna, jasno określona strona źródła światła (np. z góry-lewej), pojedyncze cienie na większych obiektach.
Styl quasi-3D – rozbudowany model światła, gradienty, miękkie cienie; wymaga większej dyscypliny, jeśli zleceniobiorców jest wiele.
Przykładowa reguła: „Stosujemy uproszczony światłocień: jedno domyślne źródło światła z lewej-góry. Cienie są zawsze nieco chłodniejszym odcieniem tego samego koloru, bez dodawania czerni. Nie stosujemy miękkich, rozmytych cieni ani efektów 3D.”
Mit: „Dodamy trochę gradientów, będzie nowocześnie.” W rzeczywistości każdy ilustrator rysuje gradienty inaczej, a po kilku zleceniach system zaczyna wyglądać jak zlepek stylów z różnych epok Dribbble.
Cienie, odbicia i kontakt z podłożem
Jeśli ilustracje zawierają postacie lub obiekty „stojące na czymś”, trzeba zdecydować, jak rozwiązujesz kontakt z podłożem. To drobiazg, który bardzo wpływa na spójność.
Do wyboru jest kilka prostych schematów:
Cienie eliptyczne – proste, miękkie elipsy pod stopami postaci / dolną krawędzią obiektów, w jednym, zdefiniowanym odcieniu.
Brak cieni – wszystkie elementy „pływają” na neutralnym tle, bez sugerowania konkretnego podłoża.
Opis może wyglądać tak: „Nie stosujemy realistycznych cieni pod postaciami. Zamiast tego używamy prostych, półprzezroczystych elips w jednym neutralnym kolorze (#000 z 8–10% opacity), albo geometrycznych podstaw w kolorach tła. Wszystkie elipsy mają tę samą rozmytość i proporcje.”
W praktyce zapobiega to sytuacji, w której jeden ilustrator rysuje ostre cienie pod kątem 30°, inny rozmyte, błękitne plamy, a trzeci w ogóle pomija ten element.
Kolor skóry, włosów i ubrań w postaciach
Jeśli w identyfikacji pojawiają się ludzie, temat palety kolorów skóry i włosów nie powinien być zostawiony przypadkowi. Da się zachować zarówno inkluzywność, jak i spójność.
Przydaje się podejście „zestawów referencyjnych”:
Zdefiniowane odcienie skóry – np. 4–6 stałych kolorów, z których korzystasz, zamiast losowych mieszanek przy każdej ilustracji.
Zakres kolorów włosów – naturalne odcienie + ewentualnie akcenty (np. pastelowe kolory w ograniczonym zakresie, jeśli to pasuje do marki).
Gama ubrań – ubrania postaci korzystają z tych samych kolorów co elementy brandowe (primary, secondary, accent), dzięki czemu ludzie „siedzą” w systemie.
To nie jest kwestia „poprawności politycznej”, tylko konsekwencji. Jeśli każdy ilustrator dobiera kolory skóry inaczej, świat postaci zaczyna się rozjeżdżać i sprawia wrażenie złożonego z cudzych, niespójnych stocków.
Kontrast, dostępność i odwracanie kolorów
Kolor i światło w ikonach to nie tylko estetyka, ale też dostępność. Ikony i ilustracje trafiają do różnych środowisk: na ekrany z trybem ciemnym, do prezentacji na rzutnikach, na wydruki o słabym nasyceniu.
Warto dopisać kilka twardych zasad:
Minimalny kontrast – np. „Ikony informacyjne muszą osiągać kontrast co najmniej 3:1 względem tła.”
Wersje na jasne i ciemne tła – opis, jak odwracamy kolory (np. ikon outline z koloru tekstu na białe w trybie dark).
Unikanie kolorów mylących – np. zbyt jasny szary, który wygląda jak stan nieaktywny, mimo że ikona jest aktywna.
Dobrze działa prosty zapis: „Dla ikon w aplikacji definiujemy dwa warianty: light (kolor tekstu #111 na jasnym tle) i dark (biały #FFF na ciemnym tle #111). Nie stosujemy pastelowych ikon na pastelowych tłach w interfejsie – zostawiamy je wyłącznie do ilustracji dekoracyjnych.”
Często panuje przekonanie, że „w ilustracjach kontrast nie jest tak ważny”. Tymczasem te same grafiki lądują potem w slajdach prezentowanych w jasnych salach, w PDF-ach oglądanych na telefonie – brak kontrastu sprawia, że cała misterna scena zamienia się w rozmazaną plamę.
Najczęściej zadawane pytania (FAQ)
Dlaczego w ogóle trzeba opisywać styl ikon i ilustracji w księdze znaku?
Bez spisanych zasad każdy grafik „ciągnie” w swoją stronę i finalnie strona, prezentacja czy aplikacja wyglądają jak zlepek różnych marek. Użytkownik nie analizuje grubości linii czy źródła biblioteki – po prostu czuje, że projekt jest niespójny i mniej profesjonalny.
Opis stylu ikon i ilustracji w brandbooku działa jak wspólny język. Dzięki temu materiały robione przez różne osoby (agencję, freelancera, zespół wewnętrzny) wizualnie należą do jednego świata, a marketing nie musi wiecznie „gasić pożarów” graficznych.
Co dokładnie powinno się znaleźć w rozdziale o ikonach i ilustracjach w księdze znaku?
Minimum to opis stylu (np. outline vs. wypełnione, poziom uproszczenia, charakter kształtów), parametry techniczne (grubość linii, siatka, formaty plików) oraz przykłady poprawnych i błędnych zastosowań. Bez tego rozdział pozostaje zbiorem ogólników, które każdy interpretuje po swojemu.
Dobrą praktyką jest też pokazanie, jak ikony mają współgrać z kolorystyką, typografią i zdjęciami. Przykład: „Ikony używają wyłącznie kolorów podstawowych z palety marki, cienie i gradienty są zabronione, a tekst przy ikonach zawsze piszemy krojem bazowym w odmianie Regular”.
Czy naprawdę nie wystarczy paleta kolorów, żeby ikony i ilustracje były spójne?
To popularny mit: „Jak damy te same kolory, wszystko się wyrówna”. W praktyce ten sam niebieski można użyć w ikonach 3D, płaskich piktogramach, kreskówkowych ilustracjach i hiperrealistycznych scenkach – efekt będzie dalej patchworkowy, tylko w jednej gamie barw.
O spójności decydują przede wszystkim: typ linii, poziom szczegółowości, proporcje postaci i obiektów, perspektywa, charakter kształtów (miękkie vs. techniczne), sposób użycia światła/cienia. Kolor to „ostatnia warstwa”, a nie fundament systemu ikon.
Jak przełożyć cechy marki (np. „przyjazna, ekspercka”) na styl ikon i ilustracji?
Punktem wyjścia jest lista cech marki, a celem – konkretne zasady rysunku. Przykład: „przyjazna” może oznaczać zaokrąglone narożniki, brak agresywnych kątów i uproszczone detale. „Ekspercka” – czyste proporcje, kontrolowaną symetrię, brak komiksowych min i wygłupów.
Dobrym zapisem w księdze znaku jest jedno–dwa zdania łączące strategię z formą, np.: „Ikony rysujemy z prostych, geometrycznych kształtów o zaokrąglonych narożnikach, z ograniczoną liczbą detali. Unikamy przerysowanych postaci i efektów 3D, aby zachować ekspercki charakter marki”. To są wskazówki, z którymi grafik może realnie pracować.
Jak upewnić się, że ikony pasują do logo, typografii i stylu zdjęć?
Najprościej: szukać powtarzalnych motywów i przenieść je do ikon. Jeśli logo bazuje na prostokątach z zaokrąglonymi narożnikami, ten sam promień można zastosować w narożnikach ikon. Gdy typografia jest masywna i czytelna, linie ikon nie powinny być ultracienkie, bo wizualnie „znikną” obok tekstu.
Rzeczywistość kontra mit „ikony to osobny temat”: jeśli zdjęcia są stonowane i kontrastowe, a UI ma dużo powietrza, to pstrokaty zestaw 3D-ikon z gradientami będzie wyglądał jak obcy element. W księdze znaku opłaca się wprost pokazać zestawienia: logo + typografia + ikony na jednym layoucie.
Jakie są skutki braku spójności ikon i ilustracji dla odbioru marki?
Najczęściej widać „efekt patchworku”: na jednej stronie miesza się styl outline i solid, izometria z płaskimi ilustracjami, różne biblioteki ikon, a do tego pojawiają się kolory spoza palety „bo tak było w paczce”. Na poziomie emocji przekłada się to na wrażenie chaosu i niższego profesjonalizmu.
Użytkownik nie powie: „Tu widzę brak systemu ikon”, tylko podświadomie zada sobie pytanie: „Czy ta firma ogarnia własny produkt i procesy, skoro nie ogarnia nawet materiałów?”. Spójne ikony porządkują nie tylko warstwę estetyczną, ale też pomagają szybciej rozumieć treść i poruszać się po interfejsie.
Jak opisać styl ikon i ilustracji, żeby praca z różnymi grafikami była bezbolesna?
Klucz to opis na tyle konkretny, żeby był prawie gotowym briefem. Poza ogólnym opisem estetyki dodaj: siatkę i rozmiary ikon, grubości linii, zakres dopuszczalnych kolorów, listę efektów zakazanych (np. brak cieni, brak gradientów 3D), kilka wzorcowych ikon i ilustracji oraz przykłady „tak nie robimy”.
W praktyce dobrze działa zasada: jedna strona PDF = skrócony brief dla wykonawcy. Mit brzmi: „Im więcej wolności damy grafikowi, tym będzie kreatywniej”. Rzeczywistość jest taka, że sensownie ograniczona wolność przyspiesza projekty, zmniejsza liczbę poprawek i pozwala spokojnie zlecać prace kilku osobom naraz bez ryzyka rozjazdu stylu.
