Czym jest design system?
Design system to dokument porządkujący informacje o tym, jak chcielibyśmy, aby nasza marka była postrzegana przez klientów i użytkowników. Składa się ze zbiorów graficznych, wytycznych projektowania i komunikacji, oraz materiałów źródłowych gotowych do ponownego użycia. Wszystko to ma na celu określenie spójnego języka komunikacji marki. O skuteczności design systemu mogły przekonać się już takie organizacje jak: rząd USA, IBM, Google, a także… Bank Pekao, z którym współpracowaliśmy podczas redesignu serwisu transakcyjnego Pekao24.
Korzyści z posiadania design systemu.
Największą wartością design systemu jest połączenie spójnej komunikacji wizualnej z dokumentacją techniczną, wykorzystywaną przez programistów, managerów, projektantów, copywriterów i innych specjalistów odpowiedzialnych za budowanie doświadczenia klienta. Inne plusy posiadania design systemu w swojej firmie to:
- Przyspieszenie prac nad kolejnymi produktami i usługami (niektóre firmy oceniają, że dostarczenie stron przyspieszyło nawet 8-krotnie).
- Szybsze wdrażanie nowych pracowników - nowi programiści, graficy, obsługa klientów i managerzy mają jasne wytyczne i niezbędne informacje, aby rozpocząć pracę.
- Lepsza doświadczenie użytkownika - zamiast tworzyć nowe schematy, możemy skupić się na udoskonalaniu naszego design systemu.
- Wyższa konwersja - możemy poświęcić więcej czasu na testowanie naszych projektów i ulepszanie ich co przekłada się na wyższą konwersję.
- Poczucie porządku i kontroli - każdy ma dostęp do bazy, w której widzi informacje o marce od designu po komunikację, łatwiej znaleźć potrzebne informacje.
- Lepsza komunikacja pomiędzy zespołami - design system jest wspólnym dokumentem. To słownik, dzięki któremu wszyscy zaangażowani w budowanie produktu porozumiewają się jednym językiem.
Jak budujemy design systemy?
Budowanie design systemu często rodzi pytania i wątpliwości naszych klientów. Projekty tego typu zawsze zaczynamy od spotkania, na którym dzielimy się naszą wiedzą i doświadczeniami, a także przedstawiamy przykładowe design systemy, tak aby każda osoba zaangażowana w projekt miała takie same podstawy. Zazwyczaj na tym wczesnym etapie stajemy przed wyborem:
- Tworzyć design system na podstawie obecnych projektów
Czy…
- Tworzyć design system od podstaw, a następnie dostosować do niego istniejące produkty.
Bez względu na ostatecznie podjętą decyzję, zawsze przechodzimy przez analizę marki i jej otoczenia biznesowego, co pozwala nam lepiej zrozumieć użytkowników, specyfikę branży i potrzeby naszych klientów.
Składowe design systemu.
Design system można rozłożyć na 3 mniejsze elementy:
- Style guide (księga stylu) - czyli dokument zawierający informacje o standardach projektowania, jest źródłem wiedzy m.in. o kolorach, fontach, logotypach i sposobie komunikacji z użytkownikiem.
- Pattern library (biblioteka szablonów) - czyli biblioteka graficzna zawierające konkretne przykłady interfejsu i praktyczne porady, jak z nich korzystać np. formularze występujące na stronie wraz z przykładami ich wykorzystania.
- Component library (biblioteka komponentów) - czyli połączenie biblioteki szablonów z kodem wykorzystywanym przez programistów do tworzenia kolejnych podstron. To główny czynnik przyśpieszający pracę nad kolejnymi produktami, ponieważ programiści nie muszą przepisywać kodu strony od nowa.
