Design system: co to i jak go stworzyć?

Anna Kloz
Design System co to - okładka artykułu

Spis treści

Szukasz sposobu na to, żeby nie przepalać więcej budżetu na projekty graficzne? Coraz więcej przedsiębiorców oraz marketingowców ma podobne przemyślenia i wiesz co? Aż 80% z nich zdecydowało się na Design System. Dlatego dzisiaj przeprowadzę Cię przez najważniejsze kwestie, związane z tym rozwiązaniem. Będziesz w stanie zdecydować, czy właśnie tego systemu Ci potrzeba.

Design System co to?

To przepis na przyspieszenie pracy i zmniejszenie kosztów projektowania oraz wdrażania firmowych produktów cyfrowych (m.in. stron internetowych, aplikacji, serwisów). System zawiera zasady projektowania, gotowe elementy do łączenia i fragmenty kodu. Koniec z chaosem, niezrozumieniem i tworzeniem wciąż od nowa tych samych rozwiązań.

Słyszałeś o Single Source of Truth (SSOT)? To Jedno Źródło Wiedzy, z której każdy w firmie może korzystać. W jednym miejscu gromadzone są wszystkie dane, niezbędne do podejmowania ważnych firmowych decyzji. Design System pełni rolę SSOT w zakresie projektowania. Gotowe standardy i komponenty sprawiają, że zarządzanie projektami staje się dużo prostsze i efektywniejsze.

Mało tego, chociaż system dedykowany jest głównie produktom cyfrowym, to zyskuje na nim cała komunikacja i promocja marki. Posty na social media, materiały drukowane, katalogi, prezentacje biznesowe, billboardy to tylko przykłady miejsc, w których śmiało możesz korzystać z systemu. Tak naprawdę staje się on podstawą całego designu firmy.

Elementy Design Systemu

System składa się z 3 głównych części: design language (język projektowania), biblioteki komponentów i dokumentacji. Język projektowania to podstawa do tworzenia komponentów. Zalicza się do niego kolorystyka, typografia, fonty itp. Komponenty z kolei to gotowe elementy powstałe na bazie design language, np. nawigacja, formularz kontaktowy, stopka. Dokumentacja natomiast to przewodnik po korzystaniu z systemu. Określa konkretne zasady, wytyczne i definicje niezbędne, żeby wszyscy zaangażowani w projekty, dokładnie wiedzi co gdzie wykorzystać.

To, co dokładnie będzie zawierała każda z 3 części systemu, zależy od potrzeb firmy. Pamiętaj, że w ramach rozwoju marki, system będzie się rozrastał. Oto najpopularniejsze elementy Design Systemu:

  • kolorystyka (barwy, gradienty, tony);
  • typografia;
  • fonty;
  • proporcje, obległości;
  • zdjęcia;
  • ikony;
  • logotypy;
  • przyciski (buttony);
  • elementy nawigacji;
  • okienka pop-up;
  • animacje;
  • tabele;
  • modele;
  • szablony;
  • fragmenty kodu.

Kto na Design Systemie zyskuje najbardziej?

Dla dużych organizacji, które wypuszczają na rynek i rozwijają wiele produktów cyfrowych w ramach jednej marki, ten system staje się konieczny. Potężnie usprawnia ich pracę. To wcale nie oznacza, że mniejsze firmy go nie potrzebują. Jeśli czujesz, że na projektowanie w Twojej organizacji każdy ma inny pomysł, tworzy się chaos, a efekt końcowy i tak Cię nie zadowala, przemyśl poważnie Design System.

Główne korzyści

  • Nowe produkty stają się bardziej konkurencyjne, dzięki optymalizacji czasu i kosztów ich wprowadzenia na rynek;
  • różni specjaliści pracujący nad projektami w firmie mają jeden, jasny punkt odniesienia;
  • zyskuje na tym komunikacja w zespole;
  • praca nad projektami i zarządzanie nią są łatwiejsze;
  • nowe produkty są sprawnie integrowane z wizerunkiem całej marki;
  • wpisują się w nawyki i wiedzę na temat sposobu obsługi, którą użytkownicy nabyli przy okazji korzystania z innych produktów marki;
  • zmniejszają się koszty projektowania i programaowania.

Jak wygląda wdrażanie Systemu Design w firmie?

Najłatwiej bedzie Ci zrozumieć proces tworzenia systemu projektowania, kiedy wyobrazisz sobie pierwiastek chemiczny. Spokojnie, nie będziemy zagłębiać się w skomplikowane równania. Wystarczy, że przypomnisz sobie, że najmniejszym elementem budującym każdą materię jest atom. Atomu nie da się już rozbić na mniejsze części. Atomy mogą łączyć się tworząc cząsteczki (molekuły), te z kolei budują całe organizmy. Co to ma do projektowania? Okazuje się, że dużo. Design System opiera się na podobnych zasadach (Atomic Design).

Wizualizacja pokazująca, czym jest design system
Przykład Design Systemu zbudowanego zgodnie z zasadami Atomic Design.

Atomic Design wyróżnia 5 poziomów projektowania:

  1. Atomy - najmniejsze elementy interfejsu, np. font, kolory, typografia, proporcje, odstępy, fotografie.
  2. Molekuły - proste połączenie 2 lub więcej atomów, np. przycisk z ikoną, formularz zapisu do newslettera.
  3. Organizmy - bardziej złożone połączenia atomów i molekuł, np. stopka z nawigacją, logo i przyciskiem; lista produktów; poszczególne sekcje na stronie internetowej.
  4. Szablony - połączenie organizmów, które tworzą gotowy układ strony, np. makieta.
  5. Strony - finalny widok, jaki wyświetli się użytkownikowi, razem ze wszystkimi elementami graficznymi, tekstowymi i nawigacyjnymi.

Design System obejmuje 4 pierwsze poziomy, które po połączeniu tworzą gotowy projekt (poziom 5): stronę internetową, aplikację, czy serwis. Prześledzimy teraz poszczególne etapy budowania systemu.

Etap 1. Opracowanie stylu (atomy)

Design system - co to atomy - przykład
Przykład atomów w Design Systemie Agencji Marketingowej Wzór.

Warto zacząć od przeanalizowania tych elementów graficznych, które już masz. Sprawdź, czy kolorystyka, typografia, fonty, odstępy, rozmiar nagłówków, ikony, zdjęcia itp. są ze sobą spójne. Przykładowo, może się okazać, że używasz różnych odcieni koloru podstawowego i nie jest to w żaden sposób usystematyzowane.

Zadanie na tym etapie polega na ujednoliceniu całego stylu. Zastanów się, jakich elementów podstawowych jeszcze Ci brakuje. To miejsce na ich zaprojektowanie.

Etap 2. Tworzenie biblioteki komponentów (molekuły i organizmy)

Molekuly | agencja marketingowa wzór | design system: co to i jak go stworzyć? |
Molekuły w systemie Wzoru.

Mając bazę, możesz zacząć łączyć elementy stylu w gotowe komponenty. To będą narazie proste połączenia, tj. wyszukiwarka z przyciskiem "Szukaj" i te bardziej rozbudowane, np. pełne stopki, całe sekcje, nawigacja, czy siatka produktów w sklepie internetowym.

Organizmy | agencja marketingowa wzór | design system: co to i jak go stworzyć? |
Nawigacja i stopka to przykłady organizmów - gotowych do wykorzystania komponentów.

Etap 3. Projektowanie szablonów

Czas na przygotowanie szablonów stron, zakładek i ekranów. Na tym etapie komponenty łączą się ze sobą i tworzą gotową strukturę podstron. Widać już układ, który po uzupełnieniu treściami stworzy gotowy projekt lub produkt cyfrowy.

Przykład design systemu - agencja ux wzoru
Gotowy do testowania szablon strony głównej naszej agencji marketingowej.

Etap 4. Testowanie QA

Warto jeszcze przetestować (z udziałem użytkowników) elementy stworzonego Design Systemu. Sprawdzić, czy odpowiednio realizują swoje zadanie i są dla odbiorców zrozumiałe.

Etap 5. Formułowanie dokumentacji

Dokumentację możesz tworzyć na bieżąco lub zabrać się za nią na końcu. Umieszcza się w niej wskazówki oraz dozwolone i niedopuszczalne możliwości łączenia ze sobą poszczególnych elementów. Dokumentacja określa też, w jakich miejscach ich używać i objaśnia pojęcia, bez których nie da się odpowiednio zrozumieć systemu.

Etap 6. Aktualizacja

Dobry system projektowania rośnie razem z Twoją firmą. Nie ma potrzeby od razu rozbudowywać go do wielkich rozmiarów, jeśli na chwilę obecną wystarczy Ci wersja podstawowa. Jednak, kiedy się okaże, że Twoje zapotrzebowanie rośnie i system nie zawiera jakiegoś ważnego elementu, dodaj go.

Najczęstsze błędy podczas tworzenia własnego systemu

  1. Brak regularnego aktualizowania systemu. Rozwój wizerunku firmy, jej oferty i zmiany w oczekiwaniach Klientów sprawiają, że system wymaga z czasem rozbudowy i odświeżenia. Jeśli tego nie zrobisz, stanie się dla marki zwyczajnie za ciasny i straci moc ułatwiania Twojej pracy.
  2. Skomplikowane, wieloznaczne definicje lub brak objaśnień. Ważne, żeby pojęcia użyte w systemie były jasne i zrozumiałe. Trzeba podawać definicje w każdym przypadku, który może budzić wątpliwości.
  3. Założenie, że każdy ma taką samą wiedzę. Programista zna zupełnie inne pojęcia niż web designer czy analityk biznesowy. Musisz brać to pod uwagę tworząc dokumentację.
  4. Luki w systemie. Najczęściej pomijanym elementem jest dokumentacja. Marki wychodzą z założenia, że nie jest potrzebna. Zapominają, że możliwości łączenia poszczególnych komponentów systemu jest tak wiele, że łatwo zgubić po drodze spójność wizerunku.

Czy warto skorzystać ze wsparcia agencji UX?

Odpowiedź na to pytanie zależy od tego, kogo dokładnie masz w swoim firmowym zespole. Kto ma Ci najwięcej do zaoferowania podczas tworzenia systemu? Przede wszystkim web designerzy, specjaliści w zakresie UX, programiści, graficy, ilustratorzy i eksperci od brandingu.

Warto żebyś obliczył, ile będzie Cię kosztowało stworzenie Design Systemu wewnątrz firmy. Przelicz mniej więcej ile roboczogodzin to zajmie i pomnóż przez stawkę godzinową osób, które w ten proces chcesz zaangażować. Weź pod uwagę również, że jeśli zespół nigdy wcześniej nie tworzył systemu, może potrzebować więcej czasu na jego budowę niż agencja. Firma zewnętrza odciąża też Twoich pracowników. Jeśli wybierzesz dobrą agencję, możesz mieć pewność, że dostaniesz solidny system gotowy do natychmiastowego wykorzystania.

Po czym poznać dobry Design System?

Proces tworzenia systemu, który faktycznie usprawni pracę w firmie, jest skomplikowany, ale korzystanie z niego powinno być jak najprostsze. Przestało być dla Ciebie tajemnicą to, czym jest Design System, co to design language i wiesz już, jak się je tworzy. Pozostaje nam tylko podsumować cechy dobrego systemu projektowania.

Dobry Design System poznasz po tym, że bez problemu są w stanie z niego skorzystać wszytkie osoby zaangażowane w projektowanie, wdrażanie projektów, marketing i promocję firmy. Musi być więc bardzo dobrze opisany i jasno określać, w jaki sposób z niego korzystać. Jeśli dostaniesz do rąk gotowy system i po zapoznaniu się z nim będziesz wiedział dokładnie, jak łączyć ze sobą komponenty i w jakich systuacjach to znak, że agencja UX wykonała solidną robotę. Powodzenia!

Popularne wpisy