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. 

Niezbędność Design Systemu

Design System staje się wskazany już przy dwóch produktach sygnowanych nazwą tej samej marki (np. strona internetowa i aplikacja). W przypadku dużych organizacji, posiadających, rozwijających kilkanaście, kilkadziesiąt produktów cyfrowych jest on po prostu niezbędny. Jego brak w sposób dotkliwy będzie wpływał na konkurencyjność nowych produktów (czas oraz koszt ich wyprodukowania może być większy nawet kilkukrotnie). 

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 Systems

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.

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żą:

  • efekty psychologiczne – poczucie ładu, kontroli, przewidywalności, sensu, celu
  • możliwość testowania i ciągłej optymalizacji
  • niższe koszty developmentu
  • obniżenie kosztów optymalizacji i wdrożenia nowych produktów
  • opanowanie chaosu - prostsze, efektywniejsze zarządzanie projektami
  • spójność wizualna, funkcjonalna
  • oszczędność czasu, pracy
  • wzrost wydajności pracy
  • poprawa komunikacji 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
  • spójna, trwała, rozpoznawalna tożsamość marki (wspólny styl zapewniony przez style guide), jej rynkowy wyróżnik
  • wielokrotność użycia poszczególnych elementów
  • wspólna perspektywa, wspólny zasób wiedzy interesariuszy.

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). Design System powinien operować także 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.

Ustal z nami szczegóły