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.

Szczegółowe korzyści z opracowania Design Systemu

Chciałbym teraz zagłębić się w korzyści, które płyną z opracowania design systemu. Wiesz już, że przyspiesza on wdrożenie nowych usług/produktów i ułatwia onboarding nowych pracowników. Ale jak to działa w praktyce?

Załóżmy, że Twoja firma decyduje się na wprowadzenie nowej funkcji na swojej stronie internetowej. Zamiast zaczynać od zera, design system pozwala Twojemu zespołowi na wykorzystanie istniejących komponentów i wzorców, co znacznie przyspiesza proces projektowania i kodowania. To samo dotyczy wprowadzania nowych pracowników do projektu. Zamiast tłumaczyć im indywidualne decyzje projektowe, możesz po prostu pokazać im design system, który zawiera wszystkie potrzebne wytyczne i zasady.

Design systemy są również niezastąpione, gdy chodzi o utrzymanie spójności wizualnej marki. Jeśli wszyscy designerzy i deweloperzy korzystają z tych samych zasad i komponentów, znacznie łatwiej jest utrzymać jednolity wygląd i odczucia na wszystkich stronach i produktach.

Oczywiście, korzyści te są szczególnie widoczne w dużych firmach z wieloma zespołami i produktami, ale nawet mniejsze firmy i start-upy mogą skorzystać z prostoty i efektywności, które oferują design systemy.

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.

Głębsze zrozumienie składników Design Systemu

Chciałbym teraz zgłębić temat komponentów Design Systemu, które przedstawiliśmy wcześniej – księgi stylu, biblioteki szablonów i biblioteki komponentów.

Księga stylu to podstawa każdego Design Systemu. Definiuje ona zasady dotyczące kolorystyki, typografii, ikonografii, a także tonu i stylu komunikacji. Dzięki niej twórcy treści, designerzy i programiści mają jednolite wytyczne, które pomagają w tworzeniu spójnego doświadczenia użytkownika. Księga stylu może również obejmować zasady dotyczące dostępności, takie jak kontrast kolorów i wielkość czcionek.

Biblioteka szablonów to zbiór gotowych do użycia elementów interfejsu, takich jak przyciski, formularze, nagłówki i karty. Każdy z tych elementów jest zaprojektowany zgodnie z zasadami zawartymi w księdze stylu i może być łatwo dostosowany do potrzeb konkretnego projektu.

Biblioteka komponentów idzie o krok dalej, łącząc gotowe elementy graficzne z odpowiednim kodem. Dzięki temu deweloperzy mogą łatwo skorzystać z gotowych komponentów, nie martwiąc się o ich wizualną stronę. To nie tylko przyspiesza pracę, ale także pomaga w utrzymaniu spójności wizualnej.

Poznaj światowe Design Systemy

Poznanie Design Systemów stworzonych przez gigantów technologicznych, takich jak Google czy Apple, może dać Ci wiele cennych wskazówek.

Material Design stworzony przez Google to jeden z najbardziej znanych Design Systemów. Charakteryzuje się minimalistycznym podejściem i mocnym naciskiem na interakcje użytkownika. Został zaprojektowany z myślą o różnych platformach i urządzeniach, a jego elastyczność sprawia, że jest bardzo popularny wśród designerów i deweloperów.

Human Interface Guidelines od Apple to kolejny przykład dobrze zaprojektowanego Design Systemu. Koncentruje się on na zapewnieniu spójności doświadczeń użytkownika na wszystkich urządzeniach Apple, od iPhone’ów i iPadów po Maci i Apple Watch.

Innym przykładem jest Fluent Design System od Microsoftu. Został on zaprojektowany z myślą o szerokim zakresie urządzeń i interfejsów, od komputerów stacjonarnych po wirtualną rzeczywistość, co czyni go niezwykle wszechstronnym.

Niezależnie od tego, czy jesteś deweloperem, projektantem, czy menedżerem produktu, zrozumienie tych systemów może pomóc Ci zrozumieć, jak najlepiej wykorzystać Design System w swojej pracy.

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.

Przykłady wykorzystania Design Systemów

Praktyczne przykłady zawsze dobrze ilustrują teoretyczne wywody, więc pozwól, że przytoczę kilka historii z życia wziętych.

Airbnb to firma, która w pełni doceniła korzyści płynące z wdrożenia design systemu. Zaprojektowali oni własny system nazwany Airbnb Design Language System (DLS), który znacząco przyspieszył rozwój ich produktów. Dzięki DLS, Airbnb zyskało spójne interfejsy użytkownika na różnych platformach, skróciło czas wprowadzania nowych funkcji i ułatwiło onboarding nowych projektantów i deweloperów.

Równie dobrym przykładem jest Google, który stworzył Material Design. Jest to zintegrowany system, który łączy teorię, zasoby i narzędzia, umożliwiając innowacyjne tworzenie pięknych, spójnych doświadczeń dla użytkowników.

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.

Narzędzia dla różnych ról zespołu

Jak wspomniałem wcześniej, narzędzia do pracy nad design systemem są liczne i zróżnicowane. Wybór zależy nie tylko od preferencji, ale także od roli, jaką pełnisz w zespole. Pozwól, że przedstawię kilka propozycji dla różnych specjalistów.

Dla developerów jednym z kluczowych narzędzi jest Storybook. To narzędzie open source służy do budowania komponentów UI w izolacji, co przyspiesza rozwój komponentów. Jest kompatybilne z wieloma frameworkami, takimi jak React, Vue, Angular czy Svelte.

Dla menedżerów produktu ważne jest narzędzie, które umożliwi im zarządzanie pracą zespołu i śledzenie postępów. Tu sprawdzają się takie platformy jak Jira czy Trello, które umożliwiają tworzenie i zarządzanie zadaniami, przypisywanie zadań członkom zespołu, a także śledzenie postępów i terminów.

Potencjalne wyzwania przy tworzeniu Design Systemu

Mimo wielu korzyści, tworzenie design systemu nie jest pozbawione wyzwań. Zrozumienie i przewidzenie tych trudności jest kluczem do efektywnego wdrożenia systemu.

Jednym z głównych wyzwań jest konieczność zaangażowania wielu różnych osób i zespołów. Design systemy muszą być tworzone w sposób interdyscyplinarny, co oznacza, że muszą brać pod uwagę potrzeby i celu projektantów, deweloperów, menedżerów produktu, a nawet działu marketingu.

Innym wyzwaniem jest utrzymanie aktualności design systemu. W miarę jak produkty ewoluują, również design systemy muszą być aktualizowane. Może to być trudne, szczególnie w dużych organizacjach, gdzie wiele zespołów korzysta z tego samego systemu.

Wreszcie, ważne jest zrozumienie, że design system to nie tylko zestaw narzędzi i komponentów – to także system wartości i zasad, które muszą być w pełni zintegrowane z kulturą firmy. Bez tego zaangażowania, design system może nie przynieść oczekiwanych korzyści.

Ciekawe, prawda?

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

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *