--- title: "Design system: co to jest? Słownik pojęć" description: "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." url: https://fluostudio.pl/baza-wiedzy/slownik/design-system/ --- [Identyfikacja wizualna](https://fluostudio.pl/baza-wiedzy/slownik/?dzial=identyfikacja) # Design system Inaczej system projektowy 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. ## Usługi - [UI / UX design](https://fluostudio.pl/uslugi/product-design/ui-ux-design/) - [Klucz wizualny](https://fluostudio.pl/uslugi/branding/klucz-wizualny-marki/) Pod tą nazwą kryją się dwie różne rzeczy. Zanim firma zamówi design system, dobrze jest ustalić, o którą chodzi. ## System produktu i system marki - **Design system produktu cyfrowego** obsługuje aplikację, sklep albo serwis. Składa się z elementów [interfejsu](https://fluostudio.pl/baza-wiedzy/slownik/ui/): przycisków, pól formularzy, tabel, komunikatów. Kolory, odstępy i kroje zapisuje się jako zmienne, tzw. tokeny, a komponenty mają zwykle odpowiedniki w kodzie. Projektant i programista [front-endu](https://fluostudio.pl/baza-wiedzy/slownik/front-end/) używają tych samych nazw i tych samych części. Znane publiczne przykłady to Material Design od Google i Carbon od IBM. - **System marki dla zespołu marketingu** obsługuje materiały: posty, banery, prezentacje, komunikację wewnętrzną. Składa się z gotowych modułów i [szablonów](https://fluostudio.pl/baza-wiedzy/slownik/szablon-graficzny/), z których zespół sam składa kolejne materiały. Dla działu marketingu dużego producenta robimy taki system postów i komunikacji wewnętrznej w Figmie. Graficy klienta zarządzają nim sami. W obu przypadkach decyzję podejmuje się raz, a potem korzysta się z niej przy każdym kolejnym ekranie czy poście. ## Co zawiera - fundamenty: kolory, typografię, [siatkę](https://fluostudio.pl/baza-wiedzy/slownik/siatka-projektowa/), odstępy i [ikony](https://fluostudio.pl/baza-wiedzy/slownik/ikonografia/), - komponenty: przyciski, karty, nagłówki, moduły postów, - wzorce, czyli gotowe układy, np. formularz kontaktowy albo post z cytatem, - dokumentację: kiedy czego używać, - zasady zmian: kto dodaje nowy element i jak trafia on do wszystkich. ## Design system a brandbook [Brandbook](https://fluostudio.pl/baza-wiedzy/slownik/brandbook/) opisuje, jak marka ma wyglądać i mówić. Design system daje gotowe części, z których trudno zbudować coś niezgodnego z marką. Brandbook się czyta, z design systemu korzysta się w programie. Nie każda firma go potrzebuje. Przy jednej stronie i kilku postach w miesiącu wystarczy dobra księga i kilka szablonów. Design system zaczyna się opłacać, gdy materiały robi wiele osób w wielu miejscach naraz, np. gdy grupa ma kilka serwisów w różnych krajach. Tak jest w [Grupie BEST](https://fluostudio.pl/projekty/best-s-a/), gdzie jeden system marki obsługuje serwisy spółek w pięciu krajach. ## W naszych projektach - ### [Grupa BEST](https://fluostudio.pl/projekty/best-s-a/) Jeden system marki dla serwisów spółek grupy w pięciu krajach. ## Zobacz też - [Identyfikacja wizualna Szablon graficzny Szablon graficzny to gotowy plik z ustalonym układem, kolorami i krojami marki, w którym zespół podmienia tylko treść, np. w prezentacji, ofercie albo poście. Dzięki niemu materiały zgodne z marką powstają bez udziału grafika.](https://fluostudio.pl/baza-wiedzy/slownik/szablon-graficzny/) - [Identyfikacja wizualna Brandbook Brandbook to dokument, który opisuje całą markę: jej strategię, osobowość, sposób mówienia i identyfikację wizualną z zasadami użycia. Obejmuje więcej niż księga znaku czy księga identyfikacji wizualnej.](https://fluostudio.pl/baza-wiedzy/slownik/brandbook/) - [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/) - [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/) - [Strony www Front-end Front-end to część strony lub aplikacji, którą użytkownik widzi i obsługuje, czyli układ, przyciski, formularze i animacje. Powstaje w HTML, CSS i JavaScripcie i działa w przeglądarce.](https://fluostudio.pl/baza-wiedzy/slownik/front-end/) - [Strony www Product design Product design to projektowanie produktów cyfrowych, np. aplikacji, platform i paneli dla klientów, na całej drodze: od zbadania problemu i użytkowników, przez UX i UI, po testy i kolejne wersje.](https://fluostudio.pl/baza-wiedzy/slownik/product-design/) - [Identyfikacja wizualna Ikonografia 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.](https://fluostudio.pl/baza-wiedzy/slownik/ikonografia/) - [Identyfikacja wizualna Siatka projektowa Siatka projektowa to układ niewidocznych kolumn, marginesów i odstępów, na którym opiera się projekt strony www, katalogu czy prezentacji. Dzięki niej elementy stoją w równych liniach, a kolejne strony mają ten sam porządek.](https://fluostudio.pl/baza-wiedzy/slownik/siatka-projektowa/) Hasło pojawia się też w: [Aplikacja webowa](https://fluostudio.pl/baza-wiedzy/slownik/aplikacja-webowa/), [Brand kit](https://fluostudio.pl/baza-wiedzy/slownik/brand-kit/), [CMS](https://fluostudio.pl/baza-wiedzy/slownik/cms/), [Klucz wizualny](https://fluostudio.pl/baza-wiedzy/slownik/klucz-wizualny/), [Motion guidelines](https://fluostudio.pl/baza-wiedzy/slownik/motion-guidelines/), [Wdrożenie brandingu](https://fluostudio.pl/baza-wiedzy/slownik/wdrozenie-brandingu/) ## 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)