--- title: "Ikonografia: co to jest? Słownik pojęć" description: "Ikonografia to zestaw ikon marki narysowanych według wspólnych zasad: tej samej grubości linii, narożników, siatki i stylu." url: https://fluostudio.pl/baza-wiedzy/slownik/ikonografia/ --- [Identyfikacja wizualna](https://fluostudio.pl/baza-wiedzy/slownik/?dzial=identyfikacja) # Ikonografia Inaczej ikony marki, zestaw ikon, iconography Ikonografia to zestaw ikon marki narysowanych według wspólnych zasad: tej samej grubości linii, narożników, siatki i stylu. Dzięki temu ikony na stronie, w katalogu i w aplikacji wyglądają jak jedna rodzina. ## Usługa - [Klucz wizualny](https://fluostudio.pl/uslugi/branding/klucz-wizualny-marki/) Na stronie są ikony z jednego darmowego zestawu, w katalogu z drugiego, w prezentacji z trzeciego. Każda osobno wygląda poprawnie. Razem wyglądają, jakby robiły je trzy różne firmy. I tak właśnie było. Ikonografia porządkuje to od początku. Ikony powstają jako jeden zestaw, a zasady ich rysowania i używania trafiają do [księgi identyfikacji wizualnej](https://fluostudio.pl/baza-wiedzy/slownik/ksiega-identyfikacji-wizualnej/). Słowo bywa też używane szerzej, na cały język obrazów marki: ikony, ilustracje i styl zdjęć. W księgach identyfikacji najczęściej chodzi jednak o ikony. ## Co się ustala - grubość linii i to, jak linia się kończy, - narożniki: zaokrąglone albo ostre, - siatkę, na której rysuje się każdą ikonę, i pole, które ikona zajmuje, - styl: konturowy albo wypełniony, - kolory i tła, na których ikona może stać, - najmniejszy rozmiar, w którym ikona jest jeszcze czytelna. Z takimi zasadami nową ikonę może dorysować inny projektant, a i tak będzie pasować do reszty. ## Ikona ma coś znaczyć Ikona postawiona obok nagłówka dla ozdoby niczego nie mówi. Dobra ikona zastępuje słowo albo pomaga szybciej je znaleźć. Ten sam symbol musi znaczyć to samo wszędzie: jeśli ciężarówka na stronie oznacza dostawę, w katalogu nie może oznaczać floty firmy. Ikony najlepiej pracują tam, gdzie ktoś wybiera albo szuka: w [konfiguratorze produktu](https://fluostudio.pl/baza-wiedzy/slownik/konfigurator-produktu/), w menu, w kartach technicznych, w [oznakowaniu budynku](https://fluostudio.pl/baza-wiedzy/slownik/wayfinding/). Gdy znaczenie nie jest oczywiste, ikona potrzebuje podpisu. Klient nie powinien zgadywać, co oznacza abstrakcyjny symbol. Przy większej skali ikony trafiają do biblioteki w [design systemie](https://fluostudio.pl/baza-wiedzy/slownik/design-system/). Wtedy nikt nie rysuje nowej ikony na szybko ani nie ściąga jej z internetu. ## W naszych projektach - ### [Regamet](https://fluostudio.pl/projekty/regamet/) 48 ikon z tej samej grubej czarnej linii z czerwonym akcentem co sygnet, do tabel specyfikacji, rodzajów blach i zalet produktów. - ### [Itodi](https://fluostudio.pl/projekty/itodi/) 18 ikon konfiguratora narysowanych tą samą czerwoną kreską co meble w instrukcji montażu. - ### [PR Plastics](https://fluostudio.pl/projekty/pr-plastics/) Sześć ikon narysowanych wyłącznie z kropek, bez jednej ciągłej linii, które obok siebie opowiadają drogę folii od zużytej reklamówki do granulatu. ## Zobacz też - [Identyfikacja wizualna Identyfikacja wizualna Identyfikacja wizualna to system elementów graficznych marki, czyli logo, kolorów, krojów pisma, ikon i stylu zdjęć, razem z zasadami ich łączenia. Dzięki niej materiały firmy wyglądają jak od jednego nadawcy.](https://fluostudio.pl/baza-wiedzy/slownik/identyfikacja-wizualna/) - [Identyfikacja wizualna Księga identyfikacji wizualnej Księga identyfikacji wizualnej to dokument z zasadami całego systemu wizualnego marki: logo, kolorów, typografii, ikon, zdjęć, siatek i wzorów materiałów. Pokazuje, jak z tych elementów składać nowe rzeczy.](https://fluostudio.pl/baza-wiedzy/slownik/ksiega-identyfikacji-wizualnej/) - [Identyfikacja wizualna Design system Design system to uporządkowany zbiór komponentów, zasad i plików źródłowych, z których zespół składa kolejne ekrany albo materiały marki. Zamiast projektować każdy element od nowa, korzysta się z gotowych, sprawdzonych części.](https://fluostudio.pl/baza-wiedzy/slownik/design-system/) - [Strony www Konfigurator produktu Konfigurator produktu to narzędzie na stronie, w którym klient sam składa produkt z dostępnych opcji, np. wymiaru, materiału i koloru, i zwykle od razu widzi efekt. Wynik trafia do koszyka albo do zapytania.](https://fluostudio.pl/baza-wiedzy/slownik/konfigurator-produktu/) - [Identyfikacja wizualna Wayfinding Wayfinding to system informacji wizualnej, który prowadzi ludzi przez budynek albo teren, od dojazdu i wejścia po właściwy gabinet czy halę. Tworzą go tablice, kierunkowskazy, piktogramy, numeracja i kolory.](https://fluostudio.pl/baza-wiedzy/slownik/wayfinding/) - [Identyfikacja wizualna Infografika Infografika to grafika, która pokazuje dane, proces albo zależności za pomocą wykresów, ikon, schematów i krótkiego tekstu. Ma sprawić, że złożoną informację da się zrozumieć szybciej niż z kilku akapitów.](https://fluostudio.pl/baza-wiedzy/slownik/infografika/) - [Strony www UI UI (user interface) to interfejs, czyli wszystko, co człowiek widzi na ekranie i czego używa: przyciski, pola formularzy, menu, ikony, typografia i kolory.](https://fluostudio.pl/baza-wiedzy/slownik/ui/) Hasło pojawia się też w: [Color coding](https://fluostudio.pl/baza-wiedzy/slownik/color-coding/), [Lottie](https://fluostudio.pl/baza-wiedzy/slownik/lottie/), [Sygnet](https://fluostudio.pl/baza-wiedzy/slownik/sygnet/) ## Masz logo, ale nie masz systemu? Od tego zaczynamy. Na pierwszej rozmowie sprawdzimy, czy i jak możemy pomóc, bez zobowiązań. [Porozmawiajmy](https://fluostudio.pl/kontakt/) [Umów 30 minut konsultacji](https://calendly.com/anita-fluo/darmowa-konsultacja-30-minut)