Close

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

Wdrożenie Design System oznacza przygotowanie kompleksowego produktu i narzędzia. To wyzwanie, ale efekty będą piorunujące – przy mniejszym nakładzie pieniędzy i czasu stworzymy jeszcze lepsze produkty. No dobrze, ale od czego zaczynamy przygotowanie 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 tylko o zaletach 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 już 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 nie jest 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 (Planning) 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.
design
Pixabay.com

Strona techniczna i technologiczna

I. Krytycznym okiem

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, 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

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.

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.


Jeżeli zainteresował Cię ten temat i zastanawiasz się nad przygotowaniem produktu cyfrowego zgodnie z zasadami Design System, skontaktuj się z nami.

Fotografia tytułowa: Unsplash.com

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Close