Przewodnik krok po kroku dotyczący tworzenia systemu projektowania

Wprowadzenie

W erze dostępności wszędzie i wszędzie wszechobecność stała się normą. Wiadomo jednak również, że spójność to wiarygodność. Użytkownicy są teraz bardziej świadomi. Szybkie i płynne doświadczenie jest podstawowym oczekiwaniem, niezależnie od interfejsu.

Co więcej, czas jest zasobem, którego nie można marnować. Wszystko to powinno wystarczyć, aby zachęcić Cię do zrobienia czegoś więcej ze swoją witryną lub interfejsem. Jednak próba zachowania spójności z 50 różnymi komponentami w projekcie bez błędów jest dużym wyzwaniem.

Cue in the drum rolls for "Design System" jest tutaj, aby ułatwić Ci życie.

Czym jest system projektowania?

System projektowy to obszerne archiwum jasno udokumentowanych komponentów wielokrotnego użytku, które zespół produktowy może wykorzystać do tworzenia cyfrowych doświadczeń. Innymi słowy, systemy projektowe są pojedynczym źródłem prawdy dla firmy w zakresie projektowania.

Bardziej niż przewodniki stylu czy biblioteki wzorców, system projektowania stale się rozwija. Ten ekosystem wytycznych związanych z różnymi podmiotami, w tym projektowaniem UX, może być wykorzystywany jako ramy bloków konstrukcyjnych dla każdego projektu, aby zapewnić spójność wszystkich komponentów i dopasowanie do marki.

Pomocny zarówno dla start-upów, rozwijających się firm, jak i przedsiębiorstw, system projektowania staje się niezbędnym, niepodlegającym negocjacjom zasobem w miarę rozwoju produktu. Może on również pozytywnie wpływać na cele biznesowe, przepływ pracy, pracę zespołową, doświadczenia użytkowników i ogólne wrażenia związane z marką.

Jakie są zalety systemu projektowania?

Niektóre z zalet wdrożenia projektu systemu to

1. Zwiększa wydajność przy jednoczesnym skróceniu czasu - Podstawową zaletą każdego systemu projektowania jest możliwość szybkiego tworzenia i odtwarzania prac projektowych i rozwojowych. Zespoły mogą korzystać z gotowych elementów, aby zmniejszyć potrzebę ciągłego odkrywania koła na nowo i zmniejszyć ryzyko niespójności.
2. Poprawia spójność wizualną na różnych stronach i kanałach - brak systemu projektowania obejmującego całą organizację może prowadzić do niespójności wizualnej, fragmentarycznego doświadczenia użytkownika lub izolacji od marki. Spójny zestaw standardów pomaga również w zarządzaniu większymi przeprojektowaniami lub wizualnymi rebrandingami na dużą skalę.
3. Promuje ujednolicony język - wspólny język projektowania zmniejsza możliwość zmarnowania czasu projektowania lub rozwoju z powodu nieporozumień w zespołach wielofunkcyjnych i między nimi.
4. Pozwala lepiej skoncentrować się na bardziej złożonych problemach - zespoły mogą lepiej rozwiązywać złożone problemy, takie jak ustalanie priorytetów informacji, zarządzanie podróżami itp.
5. Służy jako narzędzie referencyjne i edukacyjne dla współpracowników - system projektowania usprawnia proces wdrażania w przypadku zmian personalnych. Pomaga również nowym współpracownikom w projektowaniu UI UX lub tworzeniu treści.
6. Przyczynia się do stworzenia silnej i ponadczasowej marki - celem systemu projektowania jest przekazanie konkretnej tożsamości i projektu produktów, które obsługuje. Pomaga on tworzyć wpływowe marki i pomaga ludziom zapamiętać doświadczenie związane z marką. Dzięki temu ludzie czują się bardziej związani z marką i bardziej jej ufają.

Dziesięciostopniowy przewodnik po budowaniu systemu projektowania

Opracowaliśmy dziesięcioetapowy proces, który pomoże Twojej firmie stworzyć system projektowania.

1. Dokładnie przeanalizuj istniejący proces projektowania.

Pierwszym krokiem do opracowania strategii i zainicjowania dowolnego procesu jest zrozumienie obecnego stanu rzeczy. Przegląd i analiza bieżącego procesu projektowania w organizacji może pomóc w lepszym zrozumieniu projektu systemu najlepiej dopasowanego do marki. Zadaj sobie następujące pytania:

• Jakie jest obecne podejście organizacji do projektowania?
• Z jakich istniejących narzędzi korzysta Twoja organizacja?

Upewnij się, że oceniasz poziom dojrzałości projektowej zespołu produktowego. Pomoże to w przybliżonym dostępie do czasu wymaganego do wdrożenia nowego systemu w organizacji.

2. Określ alfabet swojej marki

Alfabet marki prowadzi do tożsamości marki, tj. wartości marki i produktu oraz języka marki. Język marki obejmuje kształty, czcionki, kolory, animacje, głos i ton.

Projektanci będą stosować język wizualny zdefiniowany przez alfabet marki. Zapoznanie się z wytycznymi dotyczącymi marki i rozmowa z interesariuszami może pomóc w zrozumieniu tożsamości i języka marki.

3. Przeprowadzenie audytu bieżącego produktu AI

Przeprowadzenie audytu interfejsu użytkownika bieżącego produktu pomoże ci stawić czoła głównemu wyzwaniu związanemu z projektowaniem produktu: powielaniu projektu. Audyt ma na celu osiągnięcie dwóch celów -

• Zwróć uwagę na obszary produktu, w których występują znaczące niespójności.
• Rozpoznanie najczęściej używanych i najważniejszych elementów produktu.

Audyt interfejsu użytkownika jest procesem wieloetapowym. Kluczowa jest identyfikacja i analiza głównych właściwości interfejsu użytkownika i ich wykorzystania w komponentach. Możesz wykorzystać dostępne narzędzia, aby zobaczyć liczbę unikalnych kolorów i krojów pisma w arkuszach stylów. Następnie można dalej rozbić każdy projekt strony internetowej na poszczególne elementy.

4. Ustalenie zasad projektowania systemu

Aby stworzyć doskonałe doświadczenie użytkownika, konieczne jest zrozumienie powodów stojących za decyzjami projektowymi. Ponadto jasny zestaw celów ułatwia definiowanie zasad projektowania i koordynację z zespołami.

Chcesz mieć proces systemu projektowania? Zacznij od tych pytań:

• Co tworzysz?
• Dlaczego to robisz?
• Jak ją zbudujesz?

Zasady projektowania muszą odzwierciedlać wartości i wizję marki.

5. Tworzenie biblioteki komponentów

Znana również jako biblioteka wzorców, powinna zawierać wszystkie funkcjonalne i dekoracyjne elementy interfejsu użytkownika. Oceń komponenty zgodnie z projektem, potrzebami użytkowników i celami biznesowymi i zachowaj te, których potrzebujesz.

6. Ustanowienie zasad

Systemy projektowe nie są tworzone w celu ograniczenia projektantów do określonego kierunku projektowania. Wręcz przeciwnie, mają one jedynie zapewnić projektantom i programistom podstawowe ramy, które rozszerzają kreatywny kierunek i pozwalają na innowacje.

Są to dwa podejścia do zasad Design System, jak wspomniano w książce Alli Kholmatovej:

• Ścisłe zasady - projektanci i programiści przestrzegają rygorystycznego procesu wprowadzania nowych wzorców lub komponentów.
• Luźne zasady - te zasady pozwalają projektantom i programistom tworzyć bez przestrzegania ścisłych ograniczeń, jeśli uważają, że skutkuje to lepszym projektem.

Podobnie jak w wielu innych aspektach życia, ważne jest, aby znaleźć właściwą równowagę między tymi zasadami, aby produkt był spójny, a jednocześnie kreatywny.

7. Wybierz swój model zarządzania

Dynamiczne, stale ewoluujące systemy projektowe wymagają prostego procesu zatwierdzania i wdrażania zmian. Istnieją trzy modele zarządzania:

• Model samotny - osoba lub grupa osób bezpośrednio "rządzi" procesem projektowania systemu.
• Model scentralizowany - jeden zespół jest odpowiedzialny i kieruje ewolucją systemu.
• Model federacyjny - wiele osób z różnych grup prowadzi proces projektowania systemu.

Podczas gdy każdy z tych modeli ma swoje wady i zalety, model samotny szczególnie może prowadzić do tego, że jedna osoba odpowiedzialna stanie się wąskim gardłem dla realizacji wielu zadań. Najlepszym rozwiązaniem jest korzystanie z kombinacji różnych modeli w zależności od potrzeb.

8. Definiowanie struktury komponentów

Powielanie komponentów funkcjonalnych jest poważnym wyzwaniem w systemach projektowych. Skutkuje to nieelastycznym systemem i wymaga od projektantów (i programistów) tworzenia nowych elementów za każdym razem, gdy pojawia się nowy scenariusz.

Udane projekty systemów są wysoce wielokrotnego użytku i pozwalają użytkownikom używać ich jako podstawy dla swoich produktów. W związku z tym zaleca się opracowywanie elementów, które można ponownie wykorzystać w różnych treściach.

Kryteria dla komponentów wielokrotnego użytku i skalowalnych:

• Modułowy - niezależne komponenty i wymienne elementy.
• Komponowalne - łączenie istniejących komponentów w celu tworzenia nowych
• Możliwość dostosowania - konfigurowalne komponenty, które działają w wielu kontekstach.

9. Upewnij się, że wszystkie zespoły używają jednolitego języka

Celem systemu projektowego jest ułatwienie płynnej pracy zespołowej. Dlatego też integracja systemu z przepływem pracy zespołów ma kluczowe znaczenie. Zwiększa to produktywność, jednocześnie dostarczając wartość członkom zespołu.

Lepsze zrozumienie sposobu, w jaki różne osoby korzystają z systemu projektowego w początkowym procesie integracji, może pomóc w odpowiedniej modyfikacji systemu.

10. Regularne przekazywanie zmian

Proces projektowania systemu ewoluuje wraz z organizacją i nie może być statyczny. Dlatego po wprowadzeniu systemu do organizacji konieczne jest informowanie o wszystkich zmianach i aktualizowanie organizacji na bieżąco.

Zwięzły i dobrze prowadzony dziennik zmian może pomóc użytkownikom zrozumieć różne aktualizacje i ich wpływ na ich pracę.

Trzy przykłady na dobry początek

Atlassian Design System

(https://atlassian.design/)

Atlassian Design System, znana australijska firma zajmująca się oprogramowaniem dla przedsiębiorstw, ma na celu zapewnienie płynnej współpracy między zwinnymi, rozproszonymi zespołami na całym świecie.

Trello i Jira, dwa z powszechnie używanych narzędzi do współpracy Atlassian, w pełni oddają filozofię projektowania firmy. Filozofia ta polega na wykorzystaniu cyfrowego doświadczenia w celu zwiększenia produktywności i ogólnego potencjału zespołów i poszczególnych członków zespołu.

Atlassian Design System oferuje zwinne techniki i efektywne śledzenie każdego etapu projektu, od planowania produktu po jego dostarczenie. Ostatecznie daje to korzystne wyniki w zakresie tworzenia i dostarczania produktów. Ich system projektowania obejmuje głównie:

1. Wytyczne projektowe
2. Standardy marki
3. Produkt
4. Ilustracja
5. Prototypowanie
6. Marketing
7. Osobowość

IBM Design System

(https://carbondesignsystem.com/migrating/guide/design)

IBM jest doskonałym przykładem dużego przedsiębiorstwa IT, które działa globalnie i stosuje własny system projektowania.

Ich możliwości obejmują wszystko, od doradztwa biznesowego i finansowania po tworzenie oprogramowania, hosting/zarządzanie IT i rozwiązania łączące oprogramowanie ze sprzętem.

Podstawową zasadą IBM jest ciągłe napędzanie postępu, czy to w społeczeństwie ludzkim, czy w marce, przy użyciu nauki, rozumu i intelektu.

Według IBM posiadanie dobrego projektu to nie tylko konieczność, ale także zobowiązanie wobec użytkowników. Oto niektóre z wyróżniających się funkcji Carbon Design System, które zapewniają programistom i projektantom pracującym z Adobe, Axure i Sketch bogactwo narzędzi i zasobów:

1. Wizualizacja danych
2. Wzory
3. Komponenty
4. Wytyczne
5. Samouczki

Uber Design System

(https://baseweb.design/)

Każdy z nas przynajmniej raz skorzystał z usług Ubera. Amerykańska firma technologiczna opiera się na przemieszczaniu się, w tym na dostawie jedzenia, wywoływaniu przejazdów, współdzieleniu przejazdów peer-to-peer i mikromobilności z wykorzystaniem skuterów i rowerów elektrycznych.

Uber potrzebuje wydajnego projektu systemu, aby tego typu usługi działały bezbłędnie we wszystkich markach podrzędnych, wewnętrznych, produktach i projektach.

Główne atrybuty Uber Design System to:

1. Architektura marki
2. Skład
3. Ton głosu
4. Ruch
5. Ilustracja
6. Fotografia
7. Ikonografia
8. Kolor
9. Logo
10. Typografia

Wskazówki, które należy znać przed utworzeniem pierwszego systemu projektowania

1. Wczesna, jasna komunikacja to Twój nowy najlepszy przyjaciel

Natychmiastowe zaangażowanie konsumentów wewnętrznych może być skomplikowane. W rzeczywistości ich opinie mogą utrudniać proces, jeśli są niejednoznaczne, dostarczone zbyt wcześnie w cyklu wersji alfa lub beta lub nie są pomocne.

Powiedz swoim klientom, użytkownikom systemu projektowania, czego potrzebujesz, aby mieć pewność, że otrzymasz konstruktywną informację zwrotną. Jeśli jesteś we wczesnym cyklu przedpremierowym, bądź szczery i jasny co do dokładnego wkładu, jakiego oczekujesz. Wskazuje to, że szukasz najbardziej znaczących wad produktu, a nie krytyki o wysokiej wierności.

Pamiętaj o nadmiernym myśleniu, wyciszaniu umysłu, ale nie wahaj się nadmiernie komunikować.

2. Twoje kroki nie są jedyną rzeczą, którą musisz śledzić

Kluczowym brakującym elementem ustalania priorytetów jest często śledzenie wykorzystania systemów projektowych. Konieczne jest zrozumienie, gdzie system jest używany, przez kogo, jak często i jaka jest częstotliwość aktualizacji.

Wdrożenie codziennego gromadzenia statystyk dotyczących tego, które zespoły korzystały dokładnie z jakich wersji biblioteki, umożliwia rzetelne zrozumienie tempa adopcji, aktualizacji i obniżania wersji.

Po zidentyfikowaniu zespołów, które rzadko dokonują aktualizacji, można poznać problemy blokujące aktualizację, a następnie je naprawić.

3. Mechanizmy sprzężenia zwrotnego są tak niedoceniane jak Rhaeghal z GOT

Aby upewnić się, że system jest nie tylko wartościowy dla użytkowników, ale także czymś, czego czują się częścią i do czego aktywnie się przyczynili, kluczowym elementem będzie posiadanie prostych, ale nieskomplikowanych sposobów przekazywania opinii (Slack, e-mail itp.) i współtworzenia systemu.

Zawsze dostarczaj instrukcje dotyczące tego, jak i gdzie przekazywać informacje zwrotne w jak największej liczbie obszarów i nigdy niczego nie zakładaj, zwłaszcza tego, że użytkownik znajdzie je w miejscu, które uważasz za najbardziej oczywiste.

System projektowania to gwiazda północna, której potrzebuje Twoja organizacja

Udany, dobrze opracowany system projektowania staje się częścią samego kręgosłupa firmy, co skutkuje spójnymi i wzmocnionymi doświadczeniami. Ponadto projektanci i programiści mają możliwość lepszego komunikowania celu produktu, zamiast utknąć w składaniu podstawowych bloków konstrukcyjnych.

Każdy specjalista może być Twoim partnerem w dostarczaniu projektu, ale tylko specjalista od projektowania identyfikuje bieżące problemy, wyzwania i aspiracje, aby stworzyć system projektowania, specjalnie dla Ciebie. Teraz nie ma czasu na czekanie. Dzięki temu obszernemu przewodnikowi na temat tworzenia systemu projektowania, od całkowitej transformacji procesu produkcyjnego dzieli Cię tylko jedna inicjatywa.

Referencje

https://ionic.io/resources/articles/why-every-company-needs-a-design-system

https://www.baianat.com/books/merits-of-design-systems/design-systems-and-their-benefits

https://www.uxpin.com/create-design-system-guide/

https://builtin.com/design-ux/11-benefits-design-systems

https://elementor.com/blog/design-system/

https://www.nngroup.com/articles/design-systems-101/

https://www.uxpin.com/studio/blog/best-design-system-examples/#h-4-uber-design-system

https://www.eleken.co/blog-posts/7-design-systems-examples-for-your-inspiration

https://aufaitux.com/blog/best-design-systems/

https://www.copycat.dev/blog/design-system-examples/

https://builtin.com/design-ux/design-system

https://www.editorx.com/shaping-design/article/design-system-examples

https://medium.com/spotify-design/5-things-i-wish-id-known-before-starting-a-design-system-at-spotify-f8624abf1081