Zrozumienie systemów i wzorców projektowych

Choć może się to wydawać nowym sposobem podejścia do cyfrowego przepływu pracy, koncepcja systemu projektowania nie jest „nowa” dla branż kreatywnych. U podstaw każdego systemu projektowego leży język wzorców projektowych, które rozwiązują typowe problemy, z którymi może się zmierzyć projektant.

Idea języka wzorców wywodzi się z architektury i urbanistyki ponad 40 lat temu i może być zastosowana w niemal każdej dziedzinie projektowania.

Systemy projektowania, takie jak Material Design, są modnym tematem, ale systematyczne podejście do projektowania jest integralną częścią wydawców czasopism od dziesięcioleci. Przeglądając strony dowolnego większego magazynu, łatwo zauważyć, że każda sekcja jest jednoznacznie zdefiniowana jako szablon ze wspólnym układem, czcionkami, kolorami itp.

Wzorce projektowe stosowane w sekcjach strony pozwalają na spójne i efektywne rozmieszczenie tekstu i obrazów w sposób, który uzupełnia kreatywną wizję publikacji.

Patrząc na czasopisma konkurencji, łatwo jest zobaczyć, jak język projektowania jednego ma się do drugiego.

Jeśli jeszcze tego nie zrobili, projektanci z wielu branż wkrótce wprowadzą język projektowania i szablony do swojego przepływu pracy. W przypadku projektantów produktów cyfrowych ten temat ewoluuje, a wielu z nich po raz pierwszy uczy się projektowania z bibliotek wzorców w złożonych systemach (lub nawet pomaga je zdefiniować).

Dopasowywanie wzorców projektowych oprogramowania z bazą kodu front-endu zwiększa złożoność, co może sprawić, że nauka języka projektowania będzie przytłaczająca.

Języki projektowania są holistyczne

Język projektowania, jak każdy inny język, jest skomplikowany i zawiera niuanse, które na początku mogą wydawać się mylące. Dlatego warto myśleć o języku projektowania jako o złożonym systemie „składającym się z wielu komponentów, które mogą ze sobą współdziałać”.

Aby zrozumieć złożony system, ważne jest, aby myśleć całościowo o języku projektowania:

• Zacznij od spojrzenia z lotu ptaka na wpływ projektu na markę lub firmę.
• Następnie zastanów się nad rolą projektowania z wielofunkcyjnymi zespołami i innymi projektantami.
• Na koniec zastanów się, jak projekt wpływa na produkt i użytkowników w danym momencie.

Ta holistyczna perspektywa kładzie nacisk na systematyczny sposób myślenia o procesach projektowych i umożliwia łatwe zastosowanie języka projektowania podczas rozwiązywania konkretnych problemów.

W praktyce język projektowania jest zasobem używanym do zmniejszenia nadmiarowości i poprawy ciągłości w sposobie, w jaki projektanci podchodzą do typowych problemów projektowych. Na przykład częstym problemem, z którym borykają się projektanci produktów, jest „muszę umieścić wezwanie do działania, aby użytkownicy mogli kliknąć”.

Jest to coś, co zostało już wcześniej rozwiązane, więc zamiast wymyślać na nowo koło (lub przycisk), język projektowania zdefiniowałby „wzór projektowy” przycisku wielokrotnego użytku z gotowymi właściwościami, takimi jak kolor i kształt, wraz z wytycznymi dotyczącymi najlepszych praktyk.

Język projektowania produktów cyfrowych jest zwykle zasobem wielofunkcyjnym, którego celem jest poprawa wydajności przepływu pracy i współpracy zespołów.

W niektórych przypadkach język jest rozszerzany do biblioteki wzorców na żywo, która jest połączona bezpośrednio z bazą kodu front-endu i analizą metryczną wzorców. Ten rodzaj złożonego systemu z różnymi zależnościami sprawia, że ​​konieczne jest holistyczne podejście do rozwiązywania problemów.

Niesamowitą rzeczą w nauce języka projektowania jest to, że koledzy z zespołu zazwyczaj pasjonują się interfejsem i interakcjami używanymi do definiowania produktu. Nauka nowego języka jest generalnie wyzwaniem, ale może być również wciągającym doświadczeniem, które łączy zespół!

Często zadawane pytania dotyczące „projektowania” myślenia systemowego

Biegła znajomość języka projektowania zapewni jakość systemu poprzez ewangelizację — która może obejmować:

• Szkolenie nowych projektantów;
• Mentoring młodszych pracowników i zarządzanie kontrahentami; lub
• Bezpośrednia współpraca z inżynierami w celu udoskonalenia interfejsu produktu przed wydaniem.

Dzięki tym wspólnym wysiłkom projektant będzie w stanie zapewnić, że wytyczne dotyczące systemu są przestrzegane lub udoskonalane w zależności od potrzeb.

Niezależnie od obowiązków, istnieje kilka typowych pytań dotyczących myślenia systemów projektowania, za które projektant może zostać pociągnięty do odpowiedzialności:

O czym powinienem myśleć podczas projektowania w systemie projektowym?

W zależności od złożoności systemu projektowania ważne jest, aby zacząć od kompleksowego podejścia do rozwiązywanego problemu. Rozważmy wcześniejszy przykład przycisku.

Jeśli kolor jest ustawiony jako #1f9efc , a projektant zmieni go na #1b3e9b bez uprzedniej konsultacji z innymi projektantami korzystającymi z tej samej biblioteki wzorów, może to spowodować błąd systemu.

Pracując w systemie projektowym, zastanów się, jak rozwiązywany problem wpłynie na cały cykl rozwoju produktu. W wielu przypadkach nie będzie i nie powinno być dużego wpływu, ponieważ biblioteka wzorców została już zweryfikowana.

Jeśli rozwiązywany problem jest nowy w systemie projektowania, może istnieć możliwość rozwinięcia biblioteki wzorców i pomocy w zdefiniowaniu nowego wzorca projektowego.

Gdy system ewoluuje, jest nowością w przepływie pracy zespołu. Tutaj potrzebna jest elastyczność, ponieważ wzorce projektowe będą się zmieniać w czasie. Jednak chociaż zmiana koloru przycisku jest łatwa, należy zawsze brać pod uwagę większą złożoność systemu.

W tym celu pomocne jest zdefiniowanie taksonomii organizowania systemu projektowania i biblioteki wzorców. Użyta terminologia powinna być łatwo zrozumiała pod względem funkcjonalnym.

Kliknij, aby zobaczyć obraz w pełnym rozmiarze.

Dzięki grupowaniu artefaktów projektowych w powszechnie rozumiane tematy, biblioteka wzorców pozwala systemowi działać w ramach pracy zespołowej i rozwijać komunikację w sposób, w jaki mówi się o wzorcach projektowych.

Skąd mam wiedzieć, kiedy muszę przerwać wzór lub utworzyć nowy wzór w systemie projektowania?

Konieczność przełamania lub stworzenia nowego wzorca projektowego zwykle zależy od dojrzałości systemu. Kiedy system projektowania ewoluuje, wzorce często się zmieniają. Po ustanowieniu systemu powinien istnieć proces żądania zmiany, aby zapewnić ciągłość i jakość.

Należy również wziąć pod uwagę złożoność systemu. Jeśli zmiana wzorca ma wpływ na innych projektantów i zespoły, proces może potrwać dłużej i często wymaga głębszego wysiłku lub zasobów (np. aktualizacja wytycznych języka projektowania, bibliotek wzorców lub bazy kodu frontonu).

Ogólnie rzecz biorąc, biblioteka wzorców nie ma być sztywna. Pomyśl o tym jako o zestawie narzędzi, który może rozwiązywać problemy i wykonywać zadania. Jeśli wszystkie próby projektowania w granicach biblioteki wzorców nie osiągają celów projektowych, intuicja może skłaniać do poszukiwania nowego narzędzia — lub może zmiany istniejącego wzorca.

Spójrz na poniższy schemat. Ogólna zasada jest taka, że ​​tożsamość i elementy , które są podstawowymi elementami składowymi marki, rzadko się zmieniają, ponieważ pomagają zdefiniować markę i artefakty projektowe.

Większość dużych organizacji ma osobne przewodniki po stylu dla elementów związanych z marką — zwłaszcza logo, kolorów i czcionek, które nie zmieniają się często. W przypadku elementów takich jak przyciski może to być iterowane lub nie w zależności od ewolucji języka projektowania, ale one również mają rzadsze zmiany ze względu na ich połączenie ze wszystkimi aspektami produktu.

Zmiany wzorca projektowego lub nowe wzorce często pojawiają się na poziomie komponentów i interakcji , ponieważ definiują one przepływy użytkownika i zestawy funkcji. Często zdarza się, że nowe przepływy użytkowników są definiowane w planie działania produktu, zwłaszcza podczas wdrażania funkcji.

Nowe wzorce projektowe będą miały właściwości podobne do wzorców już zdefiniowanych w bibliotece (takie jak czcionki i kolory), ale mogą wymagać aktualizacji interfejsu lub stanów interaktywnych, które są dodatkiem do języka projektowania.

Menedżer produktu lub właściciel produktu współpracujący z projektantem przedstawi wymagania dotyczące nowych funkcji, które są zgodne z celami biznesowymi. Decydując się na złamanie lub stworzenie nowego wzorca projektowego, pamiętaj o teorii złożonych systemów i upewnij się, że rozwiązanie jest wspólną decyzją.

Oto kilka kroków, które należy wziąć pod uwagę, zastanawiając się, jak przerwać lub zmienić wzorzec projektowy:

1. Zapewnij kontrolę jakości i ciągłość

   Pamiętaj, że jakość jest wspólnym celem produktu. Każdy jest odpowiedzialny za zapewnienie, że system projektowania wykonuje swoją pracę.

   Zawsze stosuj holistyczne podejście i przemyśl potencjalny wpływ złamania wzoru lub stworzenia nowego wzoru.

   Zapytaj siebie:

   • Czy złamanie schematu to jedyny sposób na rozwiązanie mojego problemu?
   • Jak wpłynie to na inne zespoły, jeśli złamię ten schemat?
   • Co się stanie z biblioteką wzorców, jeśli złamię ten wzorzec?

2. Komunikuj się ze współpracownikami

   Porozmawiaj z projektantami i wielofunkcyjnymi członkami zespołu, aby sprawdzić, czy ktoś inny ma takie same ograniczenia. Dowiedz się wszystkiego o wymaganiach platformy i o tym, jak proponowany wzór będzie działał w całej rodzinie produktów.

   Zapytaj siebie:

   • Kto jeszcze pracował nad tym produktem lub platformą?
   • Jakie są najlepsze praktyki platformy, dla której projektuję?
   • Z kim mogę porozmawiać, aby mógł pomóc w podjęciu decyzji i zaleceniach?

3. Zrozumienie możliwości frontonu

   Dowiedz się, co jest możliwe do wdrożenia front-end. Jeśli zmiana jest po prostu aktualizacją właściwości HTML/CSS/JavaScript, zwykle nie wymaga zerwania wzorca lub stworzenia czegoś zupełnie nowego.

   Może to być raczej prosta aktualizacja wytycznych dotyczących języka projektowania. Jako projektant ważne jest, aby ściśle współpracować z front-endem i potencjalnie znaleźć sposoby na współpracę co tydzień lub codziennie.

   Zapytaj siebie:

   • Czy zespół front-endowy został włączony do tej aktualizacji projektu?
   • Czy rozważana przeze mnie zmiana to aktualizacja front-endu?
   • Czy czegoś brakuje w wytycznych dotyczących najlepszych praktyk?

4. Zatwierdź decyzję

   Jeśli okaże się, że potrzebny jest nowy wzorzec, decyzja powinna zostać zweryfikowana ze współpracownikami i użytkownikami końcowymi oraz dostosowana do celów biznesowych.

   Jeśli komponenty frontonu są powiązane z metrykami, szybki test A/B pomoże w walidacji. Jeśli nie, przeprowadzenie testów użyteczności sprawdzi się znakomicie.

   Zapytaj siebie:

   • Czy nasz zespół ma proces żądania zmiany dotyczący walidacji nowych wzorców projektowych?
   • Co muszę zrobić, aby potwierdzić moją decyzję?
   • Czy ta decyzja tworzy nowy przepływ użytkowników, czy jest to dodatkowa funkcja?

Ta sama praca, inny sposób myślenia

Podczas projektowania w ramach systemu ważne jest, aby projektanci produktów przyjęli ogólny sposób myślenia, który jest wymagany do podejmowania decyzji. Zasady złożonego myślenia systemowego i systemowego pomogą projektantom w ich karierze. To samo dotyczy procesu budowania z biblioteki wzorców.

Podejścia te są przydatne do rozpoczęcia nowego języka projektowania lub wniesienia wkładu w już istniejący, ponieważ gdy nastawienie jest już na miejscu, metody systematyczne stają się, no cóż, „systematyczne”.

Świadomość, że inne branże i dyscypliny projektowe od wielu lat stosują podobne metody usprawniania przepływów pracy, zapewnia projektantom produktów doskonały punkt odniesienia dla najlepszych praktyk.

Ostatecznie projektowanie w systemie nie zmieni całkowicie sposobu wykonywania pracy. Jasne, pojawią się nowe narzędzia do łączenia i zarządzania złożonością, ale ostatecznie jest to przejście do holistycznego sposobu myślenia, który naprawdę pomoże ulepszyć przepływy pracy.

• • •

Dalsza lektura na blogu Toptal Design:

• Jak utworzyć przewodnik po stylach szkicu, bibliotekę i zestaw interfejsu użytkownika
• Zaprojektuj zestawienia problemów – czym są i jak je sformułować
• Skorzystaj ze swojej inspiracji – przewodnik po tablicach nastroju
• Wspólne projektowanie — przewodnik po udanym projektowaniu produktów dla przedsiębiorstw
• Zaprojektuj przyszłość: narzędzia i produkty, które na nas czekają