Za Design System uważa się zbiór standardów lub wytycznych pomagających zarządzać wyglądem stron i aplikacji. Jest to swoisty przewodnik ułatwiający projektowanie. Dzięki temu dana marka może poprzez swoje strony www czy programy w sposób jasny i kontrolowalny komunikować się z klientem w warstwie wizualnej.
Jest on szczególnie przydatny przy zarządzaniu wizualnym projektami o dużej skali jak serwisy czy aplikacje. Praktyczny jest też przy zarządzaniu wieloma mniejszymi projektami. W obecnym czasie niektóre serwisy czy usługi cyfrowe rozbudowały się znacząco. Jeśli mówimy o ilości stron/widoków, mogą one sięgać setek, a nawet tysięcy w obrębie jednego produktu. Dzięki zawartym w Design Systemie zaprojektowanym wcześniej komponentom, szybkość tworzenia kolejnych stron serwisu wzrasta (badania nad tym tematem w niektórych firmach mówią nawet o przyspieszeniu kilkukrotnym).
Design System to narzędzie niezwykle funkcjonalne i dość uniwersalne przez to, że nie jest dedykowane tylko dla projektantów UX/UI, którzy potrafią projektować na jego podstawie całe serwisy. To także niezwykle ważny zbiór informacji dla programistów, dla których te biblioteki też są użyteczne, a także project managerów czy product ownerów oraz copywriterów.
Z czego składa się Design System?
Design System w literaturze lub artykułach definiuje się w różny sposób. Zasadniczo możemy go podzielić na 3 części (czasami dzieli się go tylko na dwie):
- Styleguide - jest to zbiór standardów dla danego serwisu czy aplikacji. Wyznacza on ogólny kierunek rozwoju projektu poprzez ograniczenia w nim zawarte, a związane z kolorystyką, czy samym logotypem i identyfikacją wizualną marki. Zawarte są w nim najprostsze elementy projektowe oraz informacje takie jaki grid na stronie, ikonografie, odległości między elementami, typografie, czy nawet sposób działania mikro animacji
- Pattern library - jest to zbiór szablonów czyli bardziej złożonych elementów graficznych, czasami wręcz pewne fragmenty ekranów z poszczególnymi jego stanami. To dzięki nim właśnie praca projektanta jest później łatwiejsza. W tym zawierają się np. rozwijane menu, czy formularze, notyfikacje itd.
- Component library - to zbiór elementów znajdujących się w pattern library, ale z dodanym do niego napisanym wcześniej kodem - ten element jest skierowany także dla programistów, którzy korzystając z takiej biblioteki obniżają swój koszt czasowy.
Czy powinniśmy używać Design Systemu?
Ze względu na duże zainteresowanie Design Systemami w ostatnich latach, wielokrotnie zastanawiałem się nad ich istotnością. Design System to nie jest remedium na wszystkie problemy. Nie jest to też coś, co należy wdrażać w każdym projekcie. Z tego względu chciałbym zaproponować przyjrzenie się temu rozwiązaniu z kilku punktów widzenia.
Spojrzenie ze względu na sam projekt
- Kontrola nad projektem. Poczucie porządku to jeden z elementów, które są związane z Design Systemem. Różne elementy w nim zawarte można w bardzo elastyczny sposób układać nie tracąc przy tym na przejrzystości. Dodatkowo przy odpowiednich narzędziach (np. takich jak Figma, Sketch czy Adobe XD) można w sposób centralny zarządzać wszystkimi elementami danego typu, użytymi na wszystkich ekranach projektu.
- Duża wydajność przy większych projektach - projekty nowych ekranów mogą być szybko wprowadzane przez korzystanie z istniejącej biblioteki komponentów
- Dzięki istniejącym już elementom UI można się skupić na bardziej złożonych problemach projektowych z punktu widzenia użyteczności (UX)
- Spójny wygląd niezależnie od ilości ekranów, a także ich rodzajów czy wręcz ilości samych serwisów w ramach jednego Design Systemu
Jak to pomaga w przypadku teamów?
- Informowanie o zmianach poprzez odpowiednie oprogramowanie, wszelkie zmiany pojawiające się w Design Systemie mogą być odnotowane przez członków zespołu automatycznie.
- Komunikacja między członkami teamu, wykonującymi różne funkcje. Bardzo łatwo można skomunikować pracę np. między designerem, a programistą.
- Łatwe dzielenie się designem. Obecnie teamy projektowe bywają rozproszone. Przechowywanie bibliotek designu w jednym miejscu ułatwia procesy projektowe.
- Niezmienność wizualna projektu niezależna od projektantów. Dzięki dobrze zaprojektowanym i opisanym elementom, mimo dużej liczby osób pracujących nad projektem, wygląda on spójnie.
A co z tego ma firma?
- Uodparnia projekt na zmiany personalne. Żyjemy w świecie, w którym pracownicy bardzo często zmieniają swoje miejsce pracy. Design System pozwala utrzymać projekt na danym poziomie wizualnym niezależnie od zmian w zespole.
- Niższe koszty deweloperów dzięki istnieniu component library i narzędziom projektowym takim jak Figma. Programista może pobierać istniejący już kod wprost z Design Systemu.
- Szybsze wdrożenie nowych pracowników. Przez jednoznacznie opisane zasady łatwiej jest wprowadzić nową osobę do projektu.
- Oszczędność czasu i pracy, jak opisywałem na wstępie, gdy już masz Design System wdrożony w firmie, praca z nim mocno przyspiesza.
- Spójność marki w obrębie nie tylko jednego serwisu ale także kilku.
- Łatwa implementacja w nowych projektach, nawet jeśli inne projekty wymagają jakichś wizualnych zmian np. takich jak kolorystyka, możesz to łatwo zrobić dzięki istniejącym już komponentom.
Nie zapominajmy jednak o minusach:
- Design System to w pewnym sensie żywy twór, praca nad nim nigdy się nie kończy, musi on często ewoluować wraz z pojawiającymi się projektami i napotkanymi po drodze problemami projektowymi.
- W większości przypadków nie jest dedykowany dla małych firm i projektów. Samo tworzenie Design Systemu obarczone jest włożeniem sporego wysiłku czasowego czasami nawet większej liczby ludzi. Zanim więc będzie się on “zwracał” czasowo, należy w niego zainwestować.
- Wymaga też sporego nakładu czasu, który trzeba przeznaczyć na opis komponentów i instrukcji
- Buduje się go też w celach komunikacyjnych z innymi członkami zespołu lub obsługującymi dany podmiot firmami (np. pod względem deweloperskim), dlatego budowanie go dla jednoosobowego projektu może nie być celowe (w takim przypadku najczęściej wystarczy jakaś jego część, jak pattern library, czy prostu styleguide)
Design system to dobry sposób na uporządkowanie całego procesu twórczego w przypadku większych projektów. Potrafi w znaczący sposób zaoszczędzić czas, a co za tym idzie i pieniądze. Pomaga też w koordynowaniu pracy w zespołach. Jednak należy pamiętać, że nie nadaje się on do każdego projektu. A w przypadku tworzenia stron z mniejszą liczbą widoków, sam proces jego tworzenia może być dłuższy niż stworzenie samej witryny.
Przykłady znanych Design Systemów
Google Material Design System
Prawdopodobnie najbardziej popularny Design System. Stworzony przez firmę Google, technicznego giganta specjalizującego się w internetowych usługach i produktach.
Google udostępnia swój wyjątkowo szczegółowo opisany Material Design System do użytku publicznego. Dzięki temu różni twórcy mogą czerpać z doświadczenia projektantów Google i wykorzystywać opisane w Design Systemie standardy w celu tworzenia bardziej użytecznych produktów. Material Design System skupia się przede wszystkim na urządzeniach mobilnych (zgodnie z podejściem Mobile First Design), ale zawiera także opis wzorców dla urządzeń o wyższych rozdzielczościach.
Material Design System dzieli się na następujące główne kategorie, które w przybliżeniu odpowiadają typowym opisanym wcześniej elementom Design Systemów:
- Design – style guide.
- Components – pattern library.
- Develop – component library (wraz z kodem dla odpowiednich systemów, np. Android, iOS).
- Resources – zawiera między innymi bibliotekę narzędzi niezbędnych podczas projektowania, takich jak ikony, fonty, palety kolorów itp.
Najważniejszą kategorią jest Design, która zawiera w sobie takie obszary jak m.in. układ, nawigację, kolorystykę, typografię, czy interakcje.
Apple Human Interface Guidelines
Kolejnym spośród najpopularniejszych Design Systemów jest ten powstały pod skrzydłami innej wielkiej korporacji projektującej i produkującej komputery osobiste i mobilne, a także oprogramowanie i serwisy internetowe, a mianowicie Apple.
Apple Human Interface Guidelines również jest dostępny w sieci. Bazuje na zasadach projektowania wypracowanych przez Steve’a Jobsa, takich jak „twórz z wielką precyzją i przywiązaniem do szczegółów”, czy „upraszczaj wszystko”.
Jego struktura przypomina z grubsza tę zastosowaną w Material Design Systemie, przy czym w większym stopniu kładzie nacisk na podział pod kątem markowych systemów operacyjnych firmy Apple, czyli iOS, macOS, tvOS, watchOS itd.
Atlassian Design System
Atlassian to australijskie przedsiębiorstwo skupiające się na dostarczaniu rozwiązań zespołom programistycznym. Ich flagowym produktem jest Jira – popularne narzędzie do zarządzania zadaniami i projektami.
Atlassian Design System odzwierciedla cel podejmowany przez firmę, jakim jest przede wszystkim poprawa produktywności zespołów oraz ich indywidualnych członków, poprzez odpowiednio zaprojektowane doświadczenie płynące z korzystania z ich cyfrowych produktów.
Spora część Atlassian Design Systemu jest udostępniona publicznie w sieci, jednak niektóre kategorie są dostępne tylko dla pracowników korporacji. Ten Design System dzieli się na następujące kategorie:
- Brand – opisuje obszary takie jak misja, osobowość, czy wartości marki.
- Foundations – podstawowe aspekty interfejsu jak układ, kolory, ikonografia i typografia.
- Content – odnosi się do stylu i treści tekstu pojawiającego się w produktach Atlassian i porusza kwestie takie jak język, słownictwo, czy głos i ton marki.
- Components – component library (wraz z kodem dla programistów).
- Patterns – pattern library.
- Resources – biblioteki narzędzi.
Tworzenie Design Systemów w Figmie
Do stworzenia Design Systemu można użyć właściwie dowolnego narzędzia, umożliwiającego tworzenie treści w postaci tekstu i ilustracji oraz kategoryzację tej treści. Istnieje jednak specjalnie przeznaczony do tego software, którego funkcjonalności znacznie ułatwiają i przyspieszają pracę, a także sprawiają, że korzystanie z Design Systemu w większym zespole przebiega sprawnie i bezwysiłkowo. Jednym z tego typu programów jest Figma.
Figma jest narzędziem służącym głównie do tworzenia grafik wektorowych oraz prototypów, z którego można korzystać zarówno poprzez przeglądarkę internetową, jak i w formie klasycznej aplikacji desktopowej. Jest dostępna za darmo w podstawowej wersji objętej pewnymi ograniczeniami względem wersji płatnej. Jedną z wyróżniających funkcjonalności Figmy jest możliwość sprawnej współpracy wielu osób nad jednym projektem w czasie rzeczywistym.
„Woop free design system” stworzony w Figmie. Źródło: https://www.figma.com/community/file/1096735018562561482/Woop-free-design-system
Co sprawia, że Figma stanowi doskonałe narzędzie do tworzenia Design Systemów? Składa się na to kilka funkcjonalności oferowanych przez program:
Przejrzysta organizacja
- wyszukiwanie elementów - szybkie wyszukiwanie potrzebnych atomów, czy widgetów, które można przeciągnąć do własnego pliku z projektem.
- kopiowalne style - możliwość tworzenia stylów (kształtów, kolorów elementów itp.) oraz aplikowania ich do dowolnych innych elementów.
- wszystko w jednym miejscu - możliwość dzielenia się z innymi bibliotekami, w których zebrane są wszystkie potrzebne elementy – ikony, obrazy, fonty itd.
Źródło: https://www.figma.com/design-systems/
Sprawna współpraca
- dostępność elementów - bezwysiłkowe kopiowanie, modyfikowanie i udostępnianie elementów innym.
- kod dla programistów - możliwość pobrania automatycznie generowanego kodu, z którego mogą bezpośrednio korzystać deweloperzy.
Źródło: https://www.figma.com/design-systems/
Elastyczna edycja
- śledzenie zmian - wszystkie zmiany elementów, stylów itp. są zapisywane w historii zmian.
- możliwość rozbudowy - łatwość reorganizacji i rozbudowy design systemu.
- zarządzanie dostępem - możliwość decydowania o tym, kto może przeglądać i edytować biblioteki.
Źródło: https://www.figma.com/design-systems/
Analiza danych
- wgląd w użytkowanie bibliotek - obserwacja danych dotyczących tego kto i jak korzysta z Design Systemu.
- porównywanie wagi elementów - możliwość sprawdzenia, które elementy Design Systemu są najczęściej lub najrzadziej wykorzystywane.
Źródło: https://www.figma.com/design-systems/
Kilka słów na koniec
Tworzenie oraz wdrażanie Design Systemów to czasochłonny i często skomplikowany proces, jednak dający bardzo dużo korzyści. Tworząc go raz, możesz wykorzystywać wielokrotnie przy innych projektach. Zwiększasz komfort użytkowania swoich produktów, a także ułatwiasz ich skalowanie w przyszłości. A przede wszystkim zwiększasz poczucie kontroli podczas projektowania.
To wszystko jednak może wyglądać skomplikowanie dlatego jeśli chcesz dowiedzieć się więcej o projektowaniu Design Systemów proponujemy szkolenie: Projektowanie Design Systemów w Figmie. Podczas jego trwania, dowiesz się jak zacząć pracę i zobaczysz jak korzysta się z programu Figma w praktyce. Dodatkowo wyjdziesz ze szkolenia z gotowym fundamentem swojego Design Systemu, który będzie można swobodnie rozwijać dalej.
