Strona główna > Journal > Ścieżka > Projektowanie interfejsów > Zaczynamy wdrażanie Design System: strona biznesowa, techniczna i technologiczna
Journal

Zaczynamy wdrażanie Design System: strona biznesowa, techniczna i technologiczna

Oceń artykuł:

Wdrożenie Design System oznacza przygotowanie kompleksowego produktu i narzędzia.

To wyzwanie, ale efekty będą bardzo zadowalające – przy mniejszym nakładzie pieniędzy i czasu stworzymy jeszcze lepsze produkty.

No dobrze, ale od czego zaczynamy przygotowanie Design System? Sprawdźcie nasz poradnik krok po kroku!

Wdrożenie Design System – strona biznesowa

I. Zaangażowanie innych

Przygotowanie Design System wymaga czasu i pieniędzy, co nikogo nie zachęca do wzmożonych prac. Naszym zadaniem jest mimo wszystko przekonanie innych, jak ważne okazuje się wdrożenie systemu.

Mamy przecież solidne argumenty – przypomnijmy sobie korzyści Design System. Pamiętajmy, że taki produkt ciągle się rozwija, ale wszystko zależy od tego, jak bardzo w jego tworzenie zaangażują się pracownicy. Motywujmy więc i działajmy!

II. Planowanie i MVP

Udało się? Super, teraz nie pozostaje nam nic innego, jak tylko przystąpienie do etapu planowania. Przygotowanie Design System jest wymagające, dlatego najpierw określmy cel, jaki stoi za jego wdrożeniem, i zakres działania. Dobrym pomysłem będzie przygotowanie Minimum Viable Product (MVP).

III. Design System jako produkt

Design System jest nie tylko narzędziem, lecz przede wszystkim produktem. Tak jak przy każdym innym produkcie, zaplanujmy działania na kolejne miesiące. System wiąże się z planowaniem metodologii działania, sprintu czy przeprowadzaniem stand-up meetings.

Dzięki tym ostatnim przekonamy się, na ile postępy prac są zaawansowane względem założonej prognozy na dany przedział czasowy oraz synchronizacji informacji między członkami zespołu.

IV. Dotychczasowe rezultaty

Mając za sobą powyższe kroki, pochwalmy się dotychczasowymi rezultatami, tak by firma wiedziała, dlaczego warto dalej inwestować w Design System. Jedną z jego największych zalet jest oszczędność czasu, która przekłada się na pieniądze.

Drew Loomer (projekt202) o Design System: Jeśli masz 100 programistów, może to oznaczać oszczędności rzędu 2 mln dol. rocznie.

ilustracja designera pracującego przy komputerze
Fot. Pixabay.com

Przygotowanie Design System – strona techniczna i technologiczna

I. Krytycznym okiem

Jeśli chodzi o wdrożenie Design System, najlepszym startem jest poddanie krytycznej ocenie tego, co znajduje się już w naszych zasobach. Dzięki temu zidentyfikujemy elementy warte pozostawienia, jak i wyrzucenia, a także wyłapiemy niespójności dotyczące produktów i stron.

Naszym zadaniem jest przecież stworzenie uniwersalnego przewodnika i biblioteki zasobów. Sprawdźmy, czy odpowiada nam logo, zdjęcia i ikony, interfejs użytkownika oraz szablony. W razie potrzeby dokonujmy zmian.

II. Po analizie zasobów kolej na…

Po tym, jak już rzucimy okiem na dotychczasowe zasoby i ocenimy, czego potrzebujemy, przystąpimy do zaangażowania zespołu. Znalezione braki będą dodatkowym bodźcem, by pracownicy zaangażowali się w pracę nad Design System. Nie ograniczajmy się tylko do wykazania błędów – zwróćmy też uwagę na wszelkie korzyści, które płyną ze systemu.

Obawa, która pojawia się przy rozważaniu wdrożenia Design System, opiera się zwykle na przeświadczeniu, że jego przygotowanie zabiera zbyt wiele czasu, podczas gdy do zrobienia są inne projekty. Tymczasem w dłuższej perspektywie własny system zapewnia firmie dodatkowy czas.

III. Kwestie techniczne

Przejdźmy teraz do kwestii technicznych. Na start weźmy pod lupę paletę kolorów. Może się okazać, że designerzy z naszej firmy używają 100 różnych odcieni niebieskiego, a byłoby prościej, gdyby wykorzystywali tylko jeden z nich.

Zidentyfikujmy więc wybrane odcienie dla każdego koloru, którego często używamy, i opiszmy sposób ich zastosowania. Dotyczy to także barw tekstu, hiperłączy czy specjalnych przycisków.

IV. Przewodnik stylu

Kolejną rzeczą, której potrzebujemy, jest przewodnik stylu. Być może już taki mamy, jeśli zaś nie, przystąpmy do jego przygotowania. Dobry Design System jest dokładnie ujęty od strony technicznej, dlatego warto zwrócić uwagę na rozmiary tekstu, spacje, czcionki itp. Dochodzą do tego takie detale, jak wielkość nagłówków w artykułach na blogu czy wysokość linii.

V. Zasoby graficzne

Kluczowe jest, by zgromadzić jak największą liczbę zasobów graficznych, co przyspieszy pracę designerów. Gromadźmy także fragmenty kodu i pozostałej dokumentacji programistycznej. W bibliotece, którą utworzymy, umieszczamy m.in. ikony, fotografie, ilustracje niestandardowe, obrazy charakterystyczne dla marki (logo i inne wizerunki brandu).

Nic nie stoi też na przeszkodzie, żebyśmy wymyślili zasady, które obowiązywałyby przy tworzeniu nowych zasobów graficznych.

VI. Biblioteka wzorców

Kolejnym krokiem wdrożenia Design System jest biblioteka wzorów. Naszym zadaniem jest dołączenie wzorców projektowych.

Elementy interfejsu użytkownika i zasoby graficzne mogą się ze sobą częściowo pokrywać. Choć jeszcze większą rolę odgrywają fragmenty kodu i dokumentacja programistyczna.

Carbon Design System stworzony przez IBM.

VII. Co ze zgromadzonymi danymi?

Ostatnim elementem jest umieszczenie wszystkiego, co zgromadzimy, w odpowiednio przeznaczonym do tego miejscu. Popularnym narzędziem jest UXPin Design System, gdzie wrzucamy wszystkie zgromadzone dane.

Fotografia tytułowa: Pixabay.com

Szukasz doświadczonej agencji UX?

Oceń artykuł:
Journal / JPG / Piotr Burakowski - avatar
Autor: Piotr Burakowski
Dziennikarz biznesowo-technologiczny, publikuje od 2006 r.

Jesteś zainteresowany współpracą z nami? Zajrzyj do Portfolio