Witaj drogi czytelniku,

Jeśli jesteś, jak większość z nas, obecny w świecie oprogramowania, prawdopodobnie napotykasz wiele wyzwań związanych z utrzymaniem spójności, skalowaniem projektów i zapewnieniem, że Twoje produkty są zarówno atrakcyjne wizualnie, jak i funkcjonalne. Design Systemy mogą być odpowiedzią na Twoje zagwozdki.

Dla zobrazowania przytoczmy oto taki przykład: Adam, programista w firmie zajmującej się tworzeniem aplikacji mobilnych, był bardzo zajęty, próbując dodać nowy moduł do istniejącej aplikacji fitnessowej. Jego biurko było zatłoczone kubkami po kawie, kartkami z notatkami i pustymi opakowaniami po zupkach chińskich. "To musi być gotowe do końca tygodnia" - powiedział mu product owner. Problem zaczął się, kiedy Adam zauważył, że projekt interfejsu użytkownika, nad którym pracował, był dość chaotyczny. "Kurcze, ten przycisk wygląda zupełnie inaczej niż ten na poprzedniej stronie". Zaczęły się pojawiać pytania: "Czy to jest w porządku? Czy to naprawdę powinno tak wyglądać?".

Wtedy Adam przypomniał sobie o systemie, który zawierał spójne wzorce komponentów interfejsu użytkownika. Z pomocą takie zestawu nie musiałby już przejmować się tworzeniem nowych elementów od podstaw. Mógłby skorzystać z gotowych komponentów, co pozwoliłoby mu skupić się na implementacji nowych funkcji, zamiast na projektowaniu interfejsu. Adam zaczął przeglądać dostępne komponenty w Design Systemie i znalazł to, czego potrzebował - od przycisków i pól tekstowych po menu nawigacyjne i karty produktów. "To jest to!" - pomyślał z ulgą. Zamiast tracić czas na tworzenie kolejnych elementów od zera, mógł skorzystać z przygotowanych wcześniej rozwiązań. Adam nie musiał już przejmować się niepotrzebnymi detalami projektowania interfejsu, nie musiał zadawać pytań product ownerowi lub w dalszej kolejności dopytywać o szczegóły klienta, jak dokładnie to miałoby wyglądać - wszystko było już zaplanowane i udokumentowane.

Czym są Design Systemy i kiedy je tworzymy?

Na początek, co to jest ten tajemniczy "Design System"? To tak jakbyś miał magiczną księgę z instrukcjami dotyczącymi tego, jak budować swoje aplikacje - od kolorów i typografii po interakcje i komponenty. To zestaw zasad, wytycznych i komponentów, które pomagają w utrzymaniu spójności przy tworzeniu produktu. Design Systemy mogą być przygotowywane na różnych etapach procesu projektowego, ale zazwyczaj są tworzone na początku lub w trakcie kreślenia pierwszych prototypów aplikacji lub produktu. W mniejszych zespołach projektowych osobą odpowiedzialną będzie UX/UI designer. W takim przypadku Design System jest często tworzony równolegle z projektowaniem ekranów czy mechanizmów. Niektóre firmy decydują się również na współpracę z zewnętrznymi agencjami projektowymi lub konsultantami, którzy posiadają specjalistyczną wiedzę i doświadczenie w tworzeniu Design Systemów. To podejście może przyspieszyć proces przygotowania takiego zestawu i zapewnić dostęp do najlepszych praktyk i innowacyjnych rozwiązań w dziedzinie projektowania interfejsu użytkownika.

W czym pomagają Design Systemy?

Design Systemy zapewniają jednolity wygląd i zachowanie interfejsu użytkownika, co jest kluczowe dla budowania zaufania użytkowników. Kiedy przyzwyczajamy się, że po kliknięciu zielonego zaokrąglonego przycisku z cieniem akceptujemy pewną czynność, to oczekujemy tego samego zachowania, gdy ten przycisk pojawi się w innym miejscu. Powiedzmy, że dwa różne przyciski wykonują tą samą akcję - potrafi być to mylące dla użytkowników. I tutaj pomaga Design System.

Kiedy użytkownicy są zaznajomieni z interfejsem i wiedzą, czego się spodziewać, są mniej podatni na frustrację i dezorientację. Spójny interfejs eliminuje niepotrzebne zaskoczenia i niejednoznaczności, które mogą prowadzić do stresu i niepewności. Użytkownicy mogą skupić się na celu i wykonywaniu zadań, bez obaw o to, czy zrozumieją i jak poradzą sobie z interfejsem bez konieczności nauki nowych wzorców i zachowań co, przekłada się na zwiększoną produktywność i efektywność w korzystaniu z aplikacji. Kiedy można łatwiej przewidzieć, jak będą zachowywać się różne elementy interfejsu w różnych sytuacjach, sprawia to, że interakcja z aplikacją jest bardziej intuicyjna i przyjemna. To wszystko przekłada się na korzyści biznesowe, ponieważ spójność w interfejsie użytkownika buduje zaufanie użytkowników do marki i aplikacji, co prowadzi do większej lojalności i powtarzalności korzystania z niej. A gdy użytkownik jest zadowolony to jest bardziej skłonny do dokonywania zakupów lub korzystania z płatnych usług. Dodatkowo, zmniejszenie ryzyka pomyłek i nieporozumień prowadzi do zmniejszenia liczby pytań i problemów zgłaszanych przez użytkowników, a to w rezultacie do zredukowania kosztów obsługi klienta :)

W miarę rozwoju projektu, jego złożoność również rośnie. Design Systemy pozwalają na efektywne skalowanie projektu poprzez ponowne wykorzystanie gotowych komponentów, co przyspiesza proces tworzenia nowych funkcji i ułatwia zarządzanie zmianami. Ponadto, zespoły projektowe mogą skupić się na istotnych aspektach projektu, zamiast tracić czas na powtarzające się decyzje. Kiedyś usłyszałam jak ktoś powiedział coś bardzo trafnego - Design Systemy to inaczej reużywalny kod. Oznacza to mniej czasu poświęconego na projektowanie od zera i możliwość przeznaczenia większej ilości czasu na innowacje oraz eksperymenty.

Design Systemy służą również jako narzędzie do współpracy i komunikacji między różnymi zespołami projektowymi, w tym projektantami, programistami, testerami i interesariuszami. Dzięki jednemu źródłu prawdy o projekcie, wszyscy są na bieżąco z aktualnym stanem przedsięwzięcia. To jak katalog, który przyciąga wszystkie fragmenty projektu i układa je w spójną całość. Wyobraźmy sobie: masz jedną wielką tablicę informacyjną, na której każdy z zespołu ma swój kawałek. Można po prostu spojrzeć na tę tablicę i zobaczyć pełny obraz projektu. Design systemy nie są tylko zbiorem kodu określającym wygląd elementów na stronie - są one również oparte na jasnych wytycznych i fragmentach dokumentacji, które precyzyjnie określają, jak mają być używane poszczególne komponenty, jakie są ich założenia i jak się zachowują w różnych sytuacjach. Dzięki temu, gdy jeden członek zespołu tworzy lub modyfikuje komponent, inni automatycznie wiedzą, co to za zmiany oraz jakie są ich konsekwencje. To jak w mechanizmie z dobrze naoliwionymi trybikami - każdy element wpasowuje się idealnie w całość, bez szwanku. Taka synergia sprawia, że ​​praca zespołowa może stać się łatwiejsza i bardziej efektywna.

Jak tworzymy Design Systemy?

Pierwszy krok w tworzeniu Design Systemu to znalezienie swojego Superbohatera - nie, nie Batmana ani Supermana, chociaż mogą być inspiracją :) Chodzi o wybór technologii i narzędzi, które najlepiej odpowiadają Twoim potrzebom. Czy to będzie Sketch, Figma, czy może coś innego, to zależy od Ciebie i Twojego zespołu.

Każdy dobry Design System ma swoją opowieść - nie musi być to epicka saga, ale powinna być klarowna i zrozumiała dla wszystkich zainteresowanych. Opowiedz historię o tym, dlaczego tworzysz ten system, jak ma pomóc w pracy zespołu i jakie cele ma osiągnąć.

Od przycisków po karty, od ikon po formularze - wszystko ma swoje miejsce w Design Systemie. Upewnij się, że tworzysz komponenty elastyczne jak plastelina - mogą się rozciągać, kurczyć i dostosowywać do różnych potrzeb. Wybierz swoją paletę kolorów mądrze - chcesz, aby twoje aplikacje były zarówno atrakcyjne wizualnie, jak i dostępne dla wszystkich. I nie zapominaj o typografii - czytasz to właśnie teraz chętniej dzięki odpowiednio dobranej czcionce. No, przynajmniej miejmy nadzieję, że w tym roku zostanie lepiej dobrana.

Testuj swoje komponenty, eksperymentuj z różnymi rozwiązaniami i zbieraj opinie od swojego zespołu. Pamiętaj, że nawet najmądrzejsi uczniowie Jedi potrzebują czasem wsparcia :)

Tworzenie nowego Design Systemu vs. korzystanie z istniejącego

Decyzja, czy stworzyć nowy Design System od podstaw czy skorzystać z istniejącego, zależy od indywidualnych potrzeb projektu oraz dostępności odpowiednich rozwiązań na rynku. Tworzenie własnego Design Systemu to jak przygotowanie własnego dania – masz pełną kontrolę nad wszystkimi składnikami, ale czasami lepiej jest po prostu zamówić coś z menu i zaoszczędzić sobie wysiłku przy gotowaniu. Własny Design System daje większą kontrolę nad funkcjonalnością i dostosowanie do konkretnych potrzeb projektowych, jednak może być czasochłonne i wymagać znacznych zasobów. Z drugiej strony, korzystanie z istniejącego Design Systemu może zaoszczędzić czas i wysiłek, ale może nie spełnić wszystkich wymagań projektowych.

Moment użycia Design Systemu

Jeśli chodzi o moment, kiedy należy używać Design Systemu w procesie projektowania, istnieją dwa podejścia: przed prototypowaniem lub dopiero po nim.

Użycie przed prototypowaniem

Argument za tworzeniem Design Systemu przed prototypowaniem opiera się na konieczności zapewnienia spójności wizualnej i funkcjonalnej od samego początku projektu. Dzięki temu projektantom i deweloperom jest umożliwione korzystanie z ustalonych wzorców i komponentów od pierwszych kroków tworzenia interfejsu użytkownika. To jak planowanie wyprawy – lepiej wiedzieć, dokąd zmierzasz, zanim wsiądziesz do samochodu i ruszysz w drogę.

Użycie po prototypowaniu

Z drugiej strony projektowanie interfejsów użytkownika wymaga eksperymentowania z różnymi rozwiązaniami, a tworzenie Design Systemu przed prototypowaniem może ograniczać kreatywność i innowacyjność. Dopiero po przetestowaniu różnych pomysłów i znalezieniu tych, które najlepiej spełniają potrzeby użytkowników, można przejść do definiowania spójnych wzorców i komponentów w ramach Design Systemu.

Ostatecznie decyzja, czy tworzyć system przed czy po prototypowaniu, powinna być podejmowana indywidualnie dla każdego projektu, uwzględniając jego specyfikę i wymagania. W końcu, życie bez trochę spontaniczności i decyzji na żywioł byłoby nudne, prawda?

Najbardziej popularne Design Systemy

Kiedy myślimy o systemach projektowych, niektóre nazwy od razu przychodzą nam na myśl. Są to te, które przyczyniły się do kształtowania naszych doświadczeń użytkownika w internecie i poza nim. Oto lista najbardziej popularnych design systemów, które wyznaczają standardy w świecie projektowania interfejsu użytkownika:

• Material Design (Google) - oferuje spójny zestaw zasad projektowania dla aplikacji na różnych platformach, w tym na system Android.
• Bootstrap - Bootstrap to jeden z najbardziej popularnych frameworków CSS do budowania responsywnych i mobilnych stron internetowych. Zawiera wiele gotowych komponentów, które można łatwo dostosować do własnych potrzeb, co sprawia, że jest to idealne narzędzie dla projektantów i programistów.
• Ant Design (Alibaba) - kompleksowy system projektowy, który oferuje gotowe komponenty i wzorce projektowe dla aplikacji internetowych. Znany ze swojej prostoty i elastyczności, Ant Design jest popularnym wyborem wśród deweloperów na całym świecie.
• IBM Design Language - znany z minimalistycznego podejścia i eleganckiego designu, IBM Design Language jest często używany w aplikacjach biznesowych i korporacyjnych.
• Apple Human Interface Guidelines (HIG) - zbiór wytycznych i zasad projektowych opracowany przez Apple, który ma na celu zapewnienie spójnego i intuicyjnego użytkowania aplikacji na urządzeniach firmy, takich jak iPhone, iPad i Mac. Znany z prostoty i elegancji, HIG jest inspiracją dla wielu innych systemów projektowych.
• Fluent Design System (Microsoft) - oferuje spójne i atrakcyjne wzorce projektowe dla aplikacji na platformach firmy, takich jak Windows, Xbox i Surface. Znany z głębi, cienia i ruchu, Fluent Design System jest często wybierany przez projektantów aplikacji na platformy Microsoft.
• Polaris (Shopify) - Polaris to system projektowy stworzony przez Shopify, który oferuje kompleksowy zestaw zasad i komponentów dla aplikacji internetowych i mobilnych. Znany ze swojej elastyczności i prostoty, Polaris jest popularnym wyborem wśród sprzedawców internetowych i deweloperów na całym świecie.
• Foundations - to zestaw zasad i wytycznych projektowych opracowany przez ZURB, który oferuje gotowe komponenty i wzorce projektowe dla aplikacji internetowych i mobilnych.

Oprócz wymienionych powyżej istnieje jeszcze mnóstwo innych, które mają wpływ na nasze codzienne doświadczenia online. Jednakże nie będę wymieniać ich wszystkich, gdyż czytalibyście ten artykuł przez kolejne dni.

Przydatne artykuły

• "Wdrażanie Design Systemu w istniejącym produkcie" - implementacja design systemu w istniejącym produkcie, przedstawiając kluczowe kroki, wyzwania oraz korzyści.
• "Przewodnik dewelopera do wdrażania design systemu - Część 1" - wskazówki i najlepsze praktyki.
• “Proces i narzędzia mogą sprawić, że Twój design system stanie się więcej niż jedynie ideałem." - artykuł omawia znaczenie procesu i narzędzi w skutecznym wdrażaniu oraz utrzymaniu Design Systemu.
• "Airbnb's Design System - DLS: Budowanie języka wizualnego" - przykład jak Design System wspiera rozwój marki.
• "Case Study: Redesign koncepcji Bloggera z wykorzystaniem Material Design" - inspiracja z praktycznym zastosowaniem Material Design w projektach.
• "Shopify Polaris Design System: studium przypadku" - praktyczne wnioski z implementacji Design Systemu w Shopify.

Podsumowanie

Jeśli chcesz, żeby współpraca pomiędzy zespołem frontendowym oraz UX/UI designerami działała jak dobrze naoliwiona maszyna, a nie jak grupka uczniów próbujących zrozumieć zadanie domowe, to Design Systemy są kluczem do sukcesu. Stanowią przenośny zestaw narzędzi dla każdego, kto dąży do spójności i efektywności w projektowaniu interfejsów użytkownika. Porównując proces wytwarzania oprogramowania do gry w puzzle, każda osoba ma swoje unikalne zadanie do wykonania i one wszystkie składają się na jeden obraz. Projektanci odpowiadają za projektowanie interfejsu użytkownika, programiści za implementację kodu, a testerzy za weryfikację poprawności działania aplikacji. Design System działa jak tablica ogłoszeń w klasie, gdzie wszyscy członkowie zespołu mogą zobaczyć pełny obraz projektu, zamiast szukać zagubionych kartek z notatkami. Efektywność pracy jest zwiększona, gdy programiści mogą szybko odnaleźć i wykorzystać gotowe komponenty interfejsu, a testerzy mają dostęp do szczegółowych wytycznych, ułatwiając im tworzenie przypadków testowych i weryfikację poprawności działania interfejsu. Dzięki jednemu źródłu prawdy wszyscy członkowie zespołu mogą pracować na tej samej wersji projektu, co minimalizuje ryzyko powstawania niezgodności i nieporozumień.