Co to jest system projektowania?

System projektowania (design system) to kompleksowy przewodnik dla projektantów- zbiór reguł, zasad, ograniczeń i najlepszych praktyk. Podstawowym elementem systemu projektowania jest często biblioteka komponentów interfejsu użytkownika. Te elementy interfejsu użytkownika mają również swoją reprezentację zaimplementowaną w kodzie.

Systemy projektowe (design system) pozwala zespołowi projektować, rozwijać i utrzymywać jakość produktu.

Zalety systemów projektowych (system design)

Tworzenie systemów projektowych pozwala zaoszczędzić wiele godzin pracy i ułatwia komunikacje miedzy różnych osobami uczestniczącymi w projekcie. Oto najważniejsze z nich:

Spójność – dzięki Design System programiści są w stanie znacznie łatwiej wdrożyć spójny interfejs użytkownika. Mogą myśleć o określonej stronie jako o zestawie komponentów. Przykład: Deweloper nie musi myśleć, że jest to przycisk z tłem o określonym numerze, czcionką 12-punktową Arial i dopełnieniem 8 pikseli. Inżynier wie, że to tylko przycisk główny i używa tego komponentu na wielu stronach.

Wyższa jakość – konsystencja sprawia wrażenie wyższej jakości. Specjaliści QA z łatwością monitorują wdrożony projekt za pomocą dokumentacji Design System. Niespójność powinna pojawiać się rzadko.

Lepsza komunikacja z zespołem deweloperskim – Design System zawiera również słownictwo, które można wykorzystać w projekcie. Kiedy deweloper i projektant omawiają stronę internetową, używają tych samych nazw komponentów. Dzięki temy prawie całkowicie można wyeliminować ryzyko popełnienia błędu.

Szybszy proces projektowania – masz już zbudowaną lub kupioną bibliotekę elementów sterujących interfejsu użytkownika potrzebnych do wdrożenia interfejsu użytkownika. Teraz używasz ich tylko wtedy, gdy nowa funkcja wymaga utworzenia nowej strony lub zmodyfikowania istniejącej. Nawet jeśli zdecydujesz się zbudować bibliotekę interfejsu użytkownika od podstaw, godziny spędzone na tym zadaniu pozwolą Ci szybko utworzyć interfejs użytkownika dla nowych funkcji.

Skoncentruj się bardziej na UX, mniej na grafice – korzystanie z UI Library oznacza, że ​​nie musisz za każdym razem zastanawiać się, jak powinno wyglądać pole wejściowe na tej stronie – jest już zdefiniowane. Wizualizacje zostały wcześniej opisane w systemie – teraz możesz komponować z nimi nowe strony i bardziej skupić się na lepszej użyteczności wrażeniach.

Przykłady systemów projektowych

Polecam przeanalizować poniższe systemy:

Material Design – to jeden z najpopularniejszych systemów projektowania. Kształcił się przez wiele lat, obecnie jest używany nie tylko przez Google Team, ale także przez wielu twórców Androida i Web Apps.

Atlassian Design System – jeden z najbardziej kompletnych na rynku, stosowany w prawdziwych produktach Atlassian.

Polaris – system projektowania stworzony przez Shopify

Carbon – stworzony przez IBM

Nachos – przygotowany przez Trello. Dobrze jest zobaczyć, jak opisali zasady ilustrowania w dokumentacji.

Grommet – Design System firmy Hewlett-Packard przedstawiony w bardzo przyjazny sposób.