Czym jest design system i czemu musisz to wiedzieć?

3 min czytania
Czym jest design system i czemu musisz to wiedzieć?

Design system to jeden z ważnych elementów aplikacji czy strony. Jest to swego rodzaju dokumentacja, porządkująca to jak ma wyglądać aplikacja, jak ma być postrzegana i jaki jest cel zastosowanego designu.

Zawiera również najważniejsze informacje i wytyczne zarówno dla designerów jak i developerów. Wszystko to ma na celu spójną komunikację marki.

Korzyści opracowania design systemu

Samo opracowanie design systemu niesie za sobą wiele zalet nie tylko developerom, ale też managerom, projektantom, a nawet copywriterom. Co Ci da opracowanie design systemu?

  • Szybsze wdrożenie nowych usług / produktów.
  • Szybsze wdrożenie nowych pracowników zaangażowanych w proces projektowania.
  • Łatwiejsze i szybsze ulepszanie doświadczeń użytkownika.
  • Porządek i kontrola, ale też lepsza komunikacja pomiędzy projektantami.

Z czego składa się design system?

Każdy design system możemy podzielić na 3 składowe elementy: style guide, pattern library, component library. Co one zawierają?

  • Księga stylu – z ang. style guide – zawiera informacje o standardach projektowania czyli: kolorach, typografii i komunikacji z końcowym użytkownikiem.
  • Biblioteka szablonów – z ang. pattern library – zawiera graficzne przykłady interfejsu oraz wskazówki jak ich używać np: przyciski (we wszystkich stanach).
  • Biblioteka komponentów – z ang. component library – jest to połączenie kodu, potrzebnego do wyświetlenia danego elementu np. na stronie, z elementami graficznymi, przedstawiającymi te komponenty.

Dlaczego warto poznać inne design systemy?

Najwięksi giganci na świecie opracowali swoje autorskie systemy, które warto poznać. Dlaczego? Jeśli będziesz developerem aplikacji na IOS, to prawdopodobnie będziesz pracować na systemie opracowanym przez Apple, w przypadku Androida będzie to system od Google.

Jeśli natomiast jesteś designerem, to warto poznać najpopularniejsze design systemy. Dzięki nim dowiesz się jak opracować własny system, ale też poznasz dobre i sprawdzone wzorce.

Narzędzia do pracy nad design systemem

Do pracy nad design systemem od strony designera jest wiele narzędzi, lecz ja po krótce opowiem Ci o trzech.

Figma – to jedno z chyba najczęściej używanych narzędzi do prototypowania i projektowania. Figmy możesz uczyć się od Karola Stefańskiego. Funkcjonalności figmy możesz rozszerzać o wtyczki z komponentami z konkretnych design systemów, ale też pracować w zespole nad jednym projektem.

Uxpin – doskonale sprawujące się narzędzie do projektowania i prototypowania. Aplikacja jest dostępna zarówno na windowsa jak i MacOS. W trybie darmowym umożliwia zapisanie tylko jednego projektu.

AddobeXD – narzędzie opracowane przez giganta – Adobe. Służy do tworzenia interaktynwych prototypów i projektów – jest częścią Creative Cloud, dlatego na plus jest kompatybilność z innymi produktami od Adobe.

Ciekawe, prawda?

Mam nadzieję, że Cię zaciekawiłem zagadnieniem design systemu i zamierzasz się w tym kierunku dokształcić! Powodzenia!

1 lutego, 2022 | Ten od WordPressa | Web Developer