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.
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):
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.
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.
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:
Najważniejszą kategorią jest Design, która zawiera w sobie takie obszary jak m.in. układ, nawigację, kolorystykę, typografię, czy interakcje.
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 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:
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:
Źródło: https://www.figma.com/design-systems/
Źródło: https://www.figma.com/design-systems/
Źródło: https://www.figma.com/design-systems/
Źródło: https://www.figma.com/design-systems/
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.