Nasz proces
Design System
Design System, podobnie jak Księga Znaku, Brand Book, jest zbiorem wytycznych i elementów standardowych (komponentów) do projektowania i rozwijania produktu cyfrowego.
Stanowi on odpowiedź na pytania i wątpliwości wszystkich osób zaangażowanych w produkcję produktu cyfrowego.
Z Design Systemu korzystają UX/UI designerzy, graficy, Product Ownerzy, Product Managerowie, analitycy biznesowi, programiści, content writerzy.
Kiedy będziesz potrzebować Design Systemu
Design System staje się wskazany kiedy zauważasz w swojej firmie co najmniej jeden z poniższych przypadków:
- Programiści interfejsu wdrażają inaczej niż zaprojektował Design.
- Programiści interfejsu spędzają coraz więcej czasu lub tyle samo czasu nad podobnymi zadaniami.
- Nie testujesz jakości i konwersji poszczególnych komponentów interfejsu.
- Masz ogólne poczucie chaosu w swoim produkcie lub w organizacji, jeśli chodzi o rezultaty prac designu i developerów.
- Zwiększasz team i za chwilę do projektu dołączą kolejne osoby.
- Chcesz zorganizować proces developmentu lub przenieść go na wyższy poziom.
- Nie masz procedur DesignOps.
Design System i jego wdrożenie w organizacji posłuży za doskonały sposób, aby rozwiązać każdy z wymienionych problemów.
Kto stosuje Design System
Wbrew stereotypom Design System nie jest dużym wydatkiem, a wysiłek, który organizacja podejmuje można porównać do wdrożenia standardu jakości ISO. Dlatego stać na Design System nie tylko firmy duże, ale również małe, a nawet bardzo małe. Design System jest decyzją, którą podejmuje firma, a następnie procesem, który jest implementowany do organizacji pracy.
Do najbardziej znanych Design Systemów należą:
Atlassian Design System
Atlassian stosuje stworzony przez siebie system do projektowania płynnego i intuicyjnego user experience. Ten Design System głównie skupia się na umożliwieniu tworzenia różnorodnych interfejsów i zawiera wytyczne dotyczące designu i programowania.
Carbon Design System
Carbon Design System to dzieło przedsiębiorstwa informatycznego IBM. Skupia w sobie fragmenty kodu, narzędzia projektowe, materiały i wskazówki dotyczące user interface design. Stawia także na komunikacje ze społecznością i implementowanie ich rekomendacji.
Base Design System
Base to system stworzony przez Uber, firmę specjalizującą się w dostarczaniu usług transportowych poprzez swoją aplikację mobilną. Base to toolkit dla komponentów React o otwartym kodzie źródłowym. Oferuje też wsparcie dla czytników ekranów, a sam system jest zoptymalizowany w taki sposób, by działać na urządzeniach ze słabym połączeniem internetowym.
DHL Design
DHL to jeden z liderów w branży logistycznej specjalizującym się w przewozie przesyłek. Ich Design System skupia się na spójnym połączeniu marek znajdujących się pod firmą, to znaczy: DHL, DHL Group i Deutsche Post Brands. W opisie systemu można między innymi znaleźć, pod jakimi względami design tych trzech marek się różni i jak odpowiednio zaprojektować elementy, tak by zachować zgodność z tożsamością marki.
Ant Design System
Ant Group to spółka towarzysząca Alibaba Group. Grupa świadczy usługi finansowe i jest właścicielem największej mobilnej platformy płatniczej — Alipay. Opracowany przez nich Design System ma na celu wspomaganie projektantów produktów i pozwolenie im na dostarczaniu lepszego user experience.
Audi Design System
Design System opracowany przez Audi — niemieckiego producenta samochodów — został stworzony jako single-source-of-truth, który zawiera w sobie wszystkie komponenty i wytyczne przydatne podczas tworzenia produktów. System ten ma na celu nie tylko usprawnienie pracy zespołu produktowego, ale także ulepszenie procesu wdrażania nowych pracowników.
U.S. Web Design System
Wiedzieliście, że rząd Stanów Zjednoczonych ma własny Design System? Ja też nie. Na stronie rządowej można między innymi dowiedzieć się, że system ten był bazą dla stron takich jak: NASA Glenn Reserach Center, National Institute of Health Library, czy U.S. Department of Veterans Affairs. System w ogólnym założeniu ma na celu usprawnienie tworzenia stron internetowych nie tylko dla desktop, ale też dla urządzeń mobilnych.
Czym jest Design System?
Bez względu na formę prezentacji (np. na dedykowanej stronie internetowej) Design System jest zbiorem:
- opisów dobrych praktyk
- wytycznych
- reguł
- instrukcji
- definicji
- rekomendacji
- sposobów implementacji
- gotowych bibliotek.
Do najbardziej elementarnych składowych Design Systemu należą reguły dotyczące:
- kolorystyki (tonów, odcieni, gradientów)
- logotypów, trustmarków
- elementów graficznych (np. ikon)
- nawigacji
- reguł tworzenia menu, interfejsów, formularzy
- szablonów stron, podstron, ekranów (także w sensie programistycznym)
- systemów siatek
- typografii (rodziny czcionek i sposobów ich zastosowania w różnych rodzajach tekstu i w różnych kontekstach)
- wielkości elementów i ich relacji (np. proporcji, odległości).
Dzięki uporządkowaniu informacji, Design System staje się dokumentem pełniącym rolę Jednego Źródła Prawdy (SSOT – Single Source of Truth).
Ma to niebagatelne znaczenie, bowiem wyklucza wszelką dowolność, osobiste preferencje.
Uodparnia projekt na zmiany wynikające z wprowadzenia nowego pracownika do zespołu, czy wzajemne niezrozumienie celów i potrzeb, jakimi kierują się specjaliści pracujący przy danym projekcie.
Zastosowanie Design Systemów
Poszczególne komponenty Design Systemu mogą być wykorzystywane w różnych kontekstach i w różnych konfiguracjach.
Zaawansowane, najbardziej szczegółowe Design Systemy, uwzględniają także dozwolone, akceptowalne i niedopuszczalne połączenia poszczególnych elementów.
W tym sensie Design System różni się od prostego Przewodnika Stylów (Style Guide), czy Biblioteki Szablonów (Pattern Library).
Design System tworzony jest zarówno na potrzeby wewnętrzne firmy (np. rozwój, optymalizacja, integracja produktu), jak i zewnętrzne.
Jeszcze więcej korzyści dla klientów
Klientom, użytkownikom dostarcza wiedzy pozwalającej w szybki, bezproblemy sposób rozpoznać markę.
Wpisuje się w ich oczekiwania i nawyki. Aktywizuje wiedzę o sposobach użytkowania nabytych w czasie korzystania z innych produktów marki.
Spójność wizualna (branding produktu i marki), funkcjonalna (np. sposób działania) rodziny produktów zwiększa także satysfakcję userów.
Działa tutaj dobrze znana „zasada inżyniera Mamonia” - najbardziej lubimy te rzeczy, które już znamy. Nic dziwnego.
Znane produkty są przewidywalne i odbierane jako bezpieczne. Co więcej, pozytywne reakcje emocjonalne wywołane w przeszłości przez inny produkt marki, sprawiają, że nowy produkt „na dzień dobry” otrzymuje duży kredyt zaufania i sympatii.
Design System wspiera takie nastawienia, stanowi czytelną dla mózgu sugestię. A nasz mózg bardzo lubi przyjemnie kojarzące się powtórzenia.
Korzyści wewnętrzne organizacji
Dla firm oznacza duże oszczędności czasu, pracy i pieniędzy. Jednoznaczność, jaką zapewnia wdrożony Design System, redukuje niepewność i konieczność ciągłego informowania o zmianach i potwierdzania, konsultowania wprowadzanych zmian.
Zespół pracuje w ramach wspólnego punktu odniesienia, wspólnego zestawu reguł, obowiązujących wszystkich specjalistów.
W przypadku rozwoju produktów przez zewnętrzne organizacje Design System także przeciwdziała niepożądanym zmianom.
Do najważniejszych zalet Design Systemu należą:
- niższe koszty developmentu
- obniżenie kosztów optymalizacji i wdrożenia nowych produktów
- zmniejszenie czasu developmentu
- możliwość testowania i ciągłej optymalizacji poszczególnych komponentów, a nie całej aplikacji, czy User Story
- opanowanie chaosu - prostsze, efektywniejsze zarządzanie projektami
- spójność wizualna, funkcjonalna
- wzrost wydajności pracy
- poprawa komunikacji w zespole poprzez operowanie tymi samymi definicjami i wzorcami
- pozytywne user experience
- rozwój przez optymalizację (iteracja), zamiast przez rewolucję (praca od podstaw nad każdym elementem)
- skalowalność elementów
- szybsze wdrożenie nowych pracowników
- zarządzalność marką aplikacji, która dzięki Design System osiąga lepszą spójność w swojej komunikacji wizualnej
- wielokrotność użycia, lub reużywalność, poszczególnych elementów
- wspólna perspektywa, wspólny zasób wiedzy interesariuszy
- ostatni wymieniony, choć często najistotniejszy powód, to efekt psychologiczny – poczucie ładu, kontroli, przewidywalności, sensu, celu.
Design System jest narzędziem, które powinno być rozwijane, optymalizowane równolegle do zmian zachodzących w produktach, potrzebach użytkowników oraz w samej marce.
Iteracyjny sposób rozwoju jest jednocześnie o wiele mniej kosztowny i o wiele bardziej elastyczny.
Design System tworzony taką metodą o wiele szybciej można zaadaptować do zmieniających się warunków rynkowych i potrzeb użytkowników.
Tworzenie Design Systems
Stworzenie wyczerpującego Design Systemu wymaga bardzo dużej skrupulatności. Z drugiej zaś strony nie może się ono obejść bez systematycznego aktualizowania.
Prace nad Design Systemem należy zacząć od przygotowania listy wszystkich komponentów najbardziej typowych i najczęściej powtarzanych.
Na tym etapie należy także dokonać ich przeglądu, sprawdzić spójność, opisać reguły oraz wskazać dopuszczalne wyjątki od nich.
Dążenie do kompletności i ciągła jej weryfikacja jest podstawową metodą pracy nad Design Systemem.
Równie istotne są kwestie nazewnictwa, jasności i jednoznaczności używanych pojęć. Stąd bardzo ważne jest podawanie definicji w każdym budzącym wątpliwości przypadku.
Warto także zwrócić szczególną uwagę na zależności, jakie zachodzą między poszczególnymi elementami (np. między skalą typograficzną a interfejsem). Dokładnie opisujemy co robimy projektując Design Systems na stronie z opisem usługi.
Design System powinien operować logiką przyczyn i skutków. Zalet i wad danych użyć i połączeń. Wszelkie elementy graficzne, pełniące rolę informacyjną, instruktażową (ikony) powinny być przetestowane przed dodaniem ich do biblioteki.
Czytelność ich roli i informacji, instrukcji, jakie niosą, powinna być taka sama bez względu na kontekst ich użycia.
Przykładowo, ta sama ikona użyta na stronie internetowej i w aplikacji mobilnej może mieć różny stopień czytelności.
Pamiętaj, a najlepiej nie zapomnij!
Tworzenie Design Systemu jest procesem, jest typowym „work in progress”. Tym samym, nie jest możliwe stworzenie jego ostatecznej wersji.
W określonym czasie może powstać wersja bliska kompletności, ale wciąż możliwa do modyfikacji. Dlatego każdy Design System musi być regularnie, cyklicznie aktualizowany.